/* Robinwall's geometry follows its canvas. This final layer deliberately resets
   authored corner radii only; native range controls retain their own geometry. */
body :not(input[type="range"]),
body :not(input[type="range"])::before,
body :not(input[type="range"])::after {
  border-radius: 0 !important;
}

/* Shared hierarchy: section label → amount → estimate → supporting copy. */
:where(
  .selection-summary,
  .selection-facts,
  .artwork-metrics,
  .receipt,
  .cost-summary,
  .studio-price,
  .card-value,
  .card-rewards,
  .account-balances
) {
  font-variant-numeric: tabular-nums;
}
:where(button, a, input, select, summary, canvas):focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}
.section-label,
.studio-viewportbar > span,
.reservation-total > span {
  letter-spacing: 0.85px;
}
#inspector > .section-label {
  margin-bottom: 16px;
}
#inspector .selection-heading h2 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.7px;
  overflow-wrap: anywhere;
}
#inspector .selection-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.selection-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin: 20px 0 0;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.selection-facts > div {
  min-width: 0;
}
.selection-facts dt {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.selection-facts dd {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#inspector .inspector-actions {
  gap: 8px;
  margin-top: 20px;
}
.selection-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 12px;
  padding: 0 0 16px;
}
.selection-summary .metric-label {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.selection-summary .metric-value {
  min-width: 0;
  font:
    500 25px / 1.2 "Space Grotesk",
    sans-serif;
  letter-spacing: -0.6px;
  color: var(--lime);
  overflow-wrap: anywhere;
}
.selection-summary .metric-estimate {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}
#inspector .selection-summary .metric-note {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  margin: 2px 0 0;
  line-height: 1.5;
}
#inspector .inspector-actions > .text-button {
  min-height: 36px;
  padding: 8px 0;
  font-size: 11px;
  line-height: 1.5;
  white-space: normal;
}
#inspector .position-details {
  margin-top: 8px;
}
#inspector .position-details .quiet-caption {
  text-align: left;
}

/* Amounts share one section, while ownership actions get their own clear edge. */
.artwork-metrics {
  margin: 20px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.artwork-metrics > .artwork-backing,
.artwork-info .artwork-metrics > .value-panel,
.artwork-metrics > .artwork-earned {
  margin: 0;
  padding: 16px 0;
  border: 0;
}
.artwork-metrics > .artwork-earned {
  border-top: 1px solid var(--line);
}
.artwork-metrics > :is(.artwork-backing, .value-panel, .artwork-earned) > span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.8px;
  line-height: 1.5;
}
.artwork-metrics > :is(.artwork-backing, .value-panel) > strong {
  margin: 7px 0 5px;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.6px;
  overflow-wrap: anywhere;
}
.artwork-metrics > .artwork-earned > strong {
  font-size: 22px;
  line-height: 1.3;
  margin: 7px 0 0;
  letter-spacing: -0.3px;
}
.artwork-metrics > :is(.artwork-backing, .value-panel, .artwork-earned) > p,
.artwork-metrics > .value-panel > small:last-child {
  font-size: 11px;
  line-height: 1.5;
  margin-top: 6px;
}
.artwork-actions {
  margin-top: 20px;
}
.artwork-actions > .artwork-owner-actions,
.artwork-actions > .primary,
.artwork-actions > .secondary {
  margin-top: 0;
}
.artwork-info .artwork-actions > button + button {
  margin-top: 8px;
}
.artwork-actions .artwork-file-actions {
  justify-content: flex-start;
  margin-top: 12px;
  gap: 24px;
}
.artwork-actions .artwork-file-actions button {
  text-align: left;
  padding-inline: 0;
  min-height: 36px;
  color: var(--muted);
  font-size: 12px;
}
.artwork-info .creator-line {
  margin-top: 18px;
}
.artwork-info .environment-note {
  margin-top: 14px;
}

/* One title row for every dialog; editing context belongs beside the canvas. */
.modal-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 16px;
  padding: 18px 32px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  flex-shrink: 0;
}
.modal-header h2,
.editor-dialog .modal-header h2 {
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 26px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
}
.modal-header .close-button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}
.editor-dialog .modal-header {
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
}
.has-modal-footer .modal-header {
  padding-bottom: 18px;
}
.modal-body {
  padding-top: 24px;
}
.modal-body .modal-intro {
  max-width: 46ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.creation-steps,
.modal-body .creation-steps {
  justify-content: flex-start;
  gap: 12px;
}
.creation-steps li:not(:last-child)::after {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--line);
  margin-left: 6px;
}
.modal-body .creation-steps {
  margin-bottom: 24px;
  padding-bottom: 20px;
}
.creation-choices {
  margin: 24px 0;
}
.creation-choice {
  gap: 10px;
  background: #151b13;
}
.creation-choice .choice-icon {
  margin-bottom: 8px;
  background: transparent;
  border: 1px solid #435334;
}
.choice-alternative {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 24px;
}
.choice-alternative > .text-button {
  padding-inline: 0;
  width: 100%;
}
.choice-alternative > :empty {
  display: none;
}
.reserve-first-action {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title arrow"
    "description arrow";
  align-items: center;
  gap: 3px 16px;
  padding: 13px 14px;
  border: 1px solid #4b5841;
  background: #171d15;
  color: var(--text);
  text-align: left;
}
.reserve-first-action:hover,
.reserve-first-action:focus-visible {
  border-color: var(--lime);
  background: #202b1b;
}
.reserve-first-action > span {
  grid-area: title;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.reserve-first-action > small {
  grid-area: description;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.reserve-first-action > b {
  grid-area: arrow;
  color: var(--lime);
  font-size: 18px;
  font-weight: 400;
}

/* Product help: one idea per screen, with app-like progress controls. */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
dialog.how-dialog {
  width: 600px;
  max-width: calc(100vw - 32px);
}
.how-dialog .how-it-works {
  overflow: hidden;
  padding: 20px 28px 22px;
}
.how-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.how-progress > span {
  color: var(--muted);
  font:
    500 10px/1 "Space Grotesk",
    sans-serif;
  letter-spacing: 0.8px;
}
.how-progress > span b {
  color: var(--lime);
  font: inherit;
}
.how-carousel {
  overflow: hidden;
  touch-action: pan-y;
}
.how-track {
  display: flex;
  align-items: stretch;
  transition: transform 280ms cubic-bezier(0.22, 0.78, 0.24, 1);
  will-change: transform;
}
.how-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: 270px 110px;
  gap: 18px;
}
.how-visual {
  display: grid;
  place-items: center;
  overflow: hidden;
  min-width: 0;
  border: 1px solid #33402e;
  background: #0d140c;
  color: var(--lime);
}
.how-scene {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 55%, #263521 0%, transparent 65%),
    repeating-linear-gradient(0deg, transparent 0 13px, #a9e75e0b 13px 14px),
    repeating-linear-gradient(90deg, transparent 0 13px, #a9e75e0b 13px 14px), #10170e;
}
.how-scene::before {
  position: absolute;
  inset: 16px;
  border: 1px solid #a9e75e20;
  content: "";
  pointer-events: none;
}
.how-art {
  aspect-ratio: 1;
  background-image: url("./assets/pixel-art-atlas.webp");
  background-repeat: no-repeat;
  background-size: 400% 200%;
  image-rendering: pixelated;
}
.how-art--frog {
  background-position: 33.333% 0;
}
.how-art--astronaut {
  background-position: 100% 0;
}
.how-art--cherries {
  background-position: 0 100%;
}
.how-art--flower {
  background-position: 100% 100%;
}
.how-art-card {
  position: absolute;
  top: 50%;
  width: 29%;
  max-width: 188px;
  padding: 6px;
  border: 1px solid #53644b;
  background: #192319;
  box-shadow: 0 12px 30px #050a06a6;
  transform: translateY(-50%);
}
.how-create-back {
  left: 12%;
  z-index: 1;
}
.how-create-main {
  left: 34%;
  z-index: 3;
  width: 33%;
  max-width: 210px;
  border-color: var(--lime);
  background: #a9e75e;
}
.how-create-main::before,
.how-create-main::after {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid #0b1608;
  background: var(--lime);
  content: "";
}
.how-create-main::before {
  top: -7px;
  left: -7px;
}
.how-create-main::after {
  right: -7px;
  bottom: -7px;
}
.how-create-front {
  right: 11%;
  z-index: 2;
}
.how-create-cursor {
  position: absolute;
  right: 13%;
  bottom: 13%;
  z-index: 4;
  width: 23px;
  height: 28px;
  background: #f4f5ee;
  clip-path: polygon(0 0, 0 92%, 27% 70%, 42% 100%, 61% 91%, 46% 61%, 78% 60%);
  filter: drop-shadow(1px 2px 0 #0b120a);
}
.how-token-visual,
.how-reward-visual {
  display: grid;
  align-items: center;
  padding: 24px 7%;
}
.how-token-visual {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.how-hold-art {
  flex: 0 1 202px;
  min-width: 0;
  border: 7px solid #223226;
  box-shadow: 0 12px 30px #050a06a6;
}
.how-hold-link {
  flex: 0 0 24px;
  height: 16px;
  background: var(--lime);
  clip-path: polygon(0 39%, 56% 39%, 56% 0, 100% 50%, 56% 100%, 56% 61%, 0 61%);
}
.how-wallet-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 1 200px;
  min-width: 0;
  min-height: 168px;
  padding: 20px;
  border: 1px solid #708e55;
  background: linear-gradient(135deg, #233720, #162116);
  box-shadow: 0 12px 30px #050a06a6;
  text-align: center;
}
.how-wallet-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
  color: #c3d3b4;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.how-wallet-icon {
  position: relative;
  display: block;
  flex: 0 0 23px;
  height: 18px;
  border: 2px solid var(--lime);
  border-radius: 2px;
}
.how-wallet-icon::after {
  position: absolute;
  top: 4px;
  right: -2px;
  width: 7px;
  height: 6px;
  border: 2px solid var(--lime);
  border-radius: 2px;
  background: #1b2819;
  content: "";
}
.how-wallet-card > strong {
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(25px, 3.8vw, 32px);
  line-height: 1.05;
  white-space: nowrap;
}
.how-wallet-unit {
  margin-top: 5px;
  font-size: 13px;
}
.how-reward-visual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 18px 11%;
}
.how-reward-trade {
  padding: 8px 18px;
  border: 1px solid #6b835f;
  background: #21301d;
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.how-reward-trade b,
.how-reward-trade i {
  color: var(--lime);
}
.how-reward-trade i {
  font-style: normal;
}
.how-reward-feed {
  position: relative;
  width: 2px;
  height: 14px;
  background: var(--lime);
}
.how-reward-feed::after {
  position: absolute;
  bottom: 0;
  left: -4px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--lime);
  border-bottom: 2px solid var(--lime);
  content: "";
  transform: rotate(45deg);
}
.how-reward-eth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 178px;
  height: 64px;
  border: 1px solid var(--lime);
  background: linear-gradient(135deg, #293f21, #172518);
  box-shadow: 0 0 0 7px #a9e75e12;
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
}
.how-reward-eth i {
  width: 20px;
  height: 26px;
  background: var(--lime);
  clip-path: polygon(50% 0, 95% 60%, 50% 100%, 5% 60%);
}
.how-reward-eth strong {
  font-size: 22px;
  line-height: 1;
  white-space: nowrap;
}
.how-reward-routes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 280px);
  padding-top: 24px;
}
.how-reward-routes::before {
  position: absolute;
  top: -6px;
  left: calc(50% - 1px);
  width: 2px;
  height: 19px;
  background: var(--lime);
  content: "";
}
.how-reward-routes::after {
  position: absolute;
  top: 12px;
  right: 25%;
  left: 25%;
  height: 2px;
  background: #8aa677;
  content: "";
}
.how-reward-routes > div {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.how-reward-routes > div::before {
  position: absolute;
  bottom: 100%;
  left: calc(50% - 1px);
  width: 2px;
  height: 12px;
  background: #8aa677;
  content: "";
}
.how-reward-routes strong {
  color: var(--lime);
  font-family: "Space Grotesk", sans-serif;
  font-size: 25px;
  line-height: 1;
}
.how-reward-routes > div:last-child strong {
  color: var(--text);
}
.how-reward-routes small {
  color: #c3d3b4;
  font-size: 10px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.how-growth-outer,
.how-growth-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.how-growth-outer {
  height: 79%;
  border: 1px dashed var(--lime);
  background:
    linear-gradient(90deg, #a9e75e24 0 18%, transparent 18% 82%, #a9e75e24 82%),
    linear-gradient(0deg, #a9e75e24 0 18%, transparent 18% 82%, #a9e75e24 82%), #a9e75e0a;
  box-shadow: 0 0 26px #a9e75e14;
}
.how-growth-inner {
  width: 62%;
  border: 1px solid #8ea979;
  background: #0c140d;
}
.how-map-mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  height: 100%;
  padding: 3px;
}
.how-growth-threshold {
  position: absolute;
  top: 14%;
  left: 9%;
  padding: 7px 10px;
  border: 1px solid #607b4a;
  background: #1c2a19;
  font-family: "Space Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.4px;
}
.how-growth-threshold b {
  font-weight: inherit;
}
.how-growth-arrow {
  position: absolute;
  color: var(--lime);
  font-size: 27px;
  font-weight: 300;
  line-height: 1;
}
.how-growth-arrow--top {
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
}
.how-growth-arrow--right {
  top: 50%;
  right: 17%;
  transform: translateY(-50%);
}
.how-growth-arrow--bottom {
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}
.how-growth-arrow--left {
  top: 50%;
  left: 17%;
  transform: translateY(-50%);
}
.how-copy {
  align-self: start;
  max-width: 470px;
}
.how-kicker {
  display: block;
  margin-bottom: 9px;
  color: var(--lime);
  font:
    500 11px/1.4 "Space Grotesk",
    sans-serif;
  letter-spacing: 1px;
}
.how-it-works .how-copy h3 {
  margin: 0 0 9px;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.45px;
}
.how-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.how-copy p strong {
  color: var(--text);
  font-weight: 500;
}
.how-it-works > .how-environment {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.how-dialog.has-modal-footer #modal-content > .how-controls {
  display: grid;
  grid-template-columns: 112px 112px;
  align-items: center;
  justify-content: end;
  gap: 10px;
}
.how-dialog .how-controls > button {
  min-width: 0;
  width: 100%;
  font-size: 12px;
}
.how-dots {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
.how-dots > button {
  position: relative;
  width: 28px;
  min-width: 28px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
}
.how-dots > button::after {
  content: "";
  position: absolute;
  inset: 10px 3px;
  background: #3d4638;
  transition:
    background-color 160ms ease,
    transform 160ms ease;
}
.how-dots > button[aria-selected="true"]::after {
  background: var(--lime);
  transform: scaleY(1.5);
}
.how-dots > button:focus-visible {
  outline: 1px solid var(--lime);
  outline-offset: -2px;
}
.how-dialog #how-prev:disabled {
  opacity: 0.38;
}
@media (prefers-reduced-motion: reduce) {
  .how-track {
    transition: none;
  }
}
@media (max-width: 600px) {
  dialog.how-dialog {
    max-width: calc(100vw - 20px);
  }
  .how-scene::before {
    inset: 9px;
  }
  .how-art-card {
    padding: 3px;
  }
  .how-token-visual,
  .how-reward-visual {
    padding: 15px 5%;
  }
  .how-token-visual {
    gap: 4px;
  }
  .how-hold-art {
    flex: 0.85 1 0;
    border-width: 4px;
  }
  .how-hold-link {
    flex-basis: 14px;
    height: 14px;
  }
  .how-wallet-card {
    flex: 1.15 1 0;
    min-height: 112px;
    padding: 11px;
  }
  .how-wallet-heading {
    margin-bottom: 10px;
    font-size: 10px;
    white-space: normal;
  }
  .how-wallet-icon {
    display: none;
  }
  .how-wallet-card > strong {
    font-size: 24px;
  }
  .how-wallet-unit {
    font-size: 11px;
  }
  .how-reward-visual {
    gap: 4px;
    padding: 8px 8%;
  }
  .how-reward-trade {
    padding: 4px 10px;
    font-size: 11px;
  }
  .how-reward-feed {
    height: 9px;
  }
  .how-reward-eth {
    width: 150px;
    height: 46px;
    gap: 8px;
  }
  .how-reward-eth i {
    width: 15px;
    height: 20px;
  }
  .how-reward-eth strong {
    font-size: 18px;
  }
  .how-reward-routes {
    padding-top: 17px;
  }
  .how-reward-routes::before {
    top: -4px;
    height: 13px;
  }
  .how-reward-routes::after {
    top: 8px;
  }
  .how-reward-routes > div::before {
    height: 9px;
  }
  .how-reward-routes strong {
    font-size: 18px;
  }
  .how-reward-routes small {
    font-size: 9px;
  }
  .how-growth-threshold {
    top: 11%;
    left: 6%;
    padding: 5px 6px;
    font-size: 11px;
  }
  .how-growth-threshold b {
    display: none;
  }
  .how-growth-outer {
    height: 68%;
  }
  .how-growth-inner {
    width: 70%;
  }
  .how-growth-arrow {
    font-size: 24px;
  }
  .how-growth-arrow--top {
    top: 2%;
  }
  .how-growth-arrow--bottom {
    bottom: 2%;
  }
  .how-growth-arrow--left {
    left: 9%;
  }
  .how-growth-arrow--right {
    right: 9%;
  }
  .how-dialog .how-it-works {
    padding: 16px 16px 18px;
  }
  .how-progress {
    margin-bottom: 12px;
  }
  .how-slide {
    grid-template-rows: 200px 112px;
    gap: 18px;
  }
  .how-it-works .how-copy h3 {
    font-size: 20px;
  }
  .how-copy p {
    font-size: 13px;
    line-height: 1.58;
  }
  .how-dialog.has-modal-footer #modal-content > .how-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-inline: 16px;
  }
  .how-dialog .how-controls > button {
    padding-inline: 8px;
  }
}
@media (max-width: 360px), (max-height: 640px) {
  .how-dialog .how-it-works {
    padding-block: 12px;
  }
  .how-progress {
    margin-bottom: 9px;
  }
  .how-slide {
    grid-template-rows: 160px 120px;
    gap: 14px;
  }
  .how-kicker {
    margin-bottom: 6px;
  }
  .how-it-works .how-copy h3 {
    margin-bottom: 6px;
    font-size: 20px;
  }
  .how-copy p {
    font-size: 13px;
    line-height: 1.5;
  }
}
.cost-summary {
  background: #141b11;
  border-color: var(--line);
}
.cost-summary > div {
  align-items: baseline;
  gap: 14px;
  line-height: 1.5;
}
.cost-summary strong {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cost-summary > div + div strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}
/* Explanations are paired label/value rows, separate from financial totals. */
.transaction-notes {
  margin: 20px 0 0;
  padding: 4px 16px;
  border: 1px solid var(--line);
  background: #ffffff03;
}
.transaction-notes > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
}
.transaction-notes > div + div {
  border-top: 1px solid var(--line);
}
.transaction-notes dt {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}
.transaction-notes dd,
.transaction-notes .reservation-note {
  margin: 0;
  font-size: 12px !important;
  color: var(--muted);
  line-height: 1.6;
}
.environment-note {
  display: block;
  margin: 20px 0 0;
  color: #919b87;
  font-size: 11px;
  line-height: 1.6;
  text-align: left;
}
.reservation-total > strong {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.release-dialog .warning {
  background: #2b231b;
  border-color: #54422e;
  line-height: 1.6;
}

/* Gallery data aligns under the title instead of becoming another headline. */
.gallery .art-card .art-meta {
  padding: 2px 2px 4px;
}
.gallery .art-card .card-value {
  font-size: 15px !important;
  font-weight: 500;
  line-height: 1.5;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  margin-top: 14px;
}
.gallery .art-card .card-value > span {
  margin-top: 3px;
  font-size: 11px;
}
.gallery .art-card .card-rewards {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #c0b4d6;
}
.gallery .art-card .art-meta .card-value,
.gallery .art-card .art-meta .card-returned {
  margin-top: auto;
}
.gallery-filters {
  gap: 0;
  padding-bottom: 0;
}
.gallery-filters button {
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.gallery-filters button.active {
  border-bottom-color: var(--lime);
  background: transparent;
}

/* Menus use the same surface and focus treatment as the rest of the app. */
.choice-menu {
  position: relative;
  color: var(--text);
  font-size: 12px;
}
.choice-menu[open] {
  z-index: 30;
}
.choice-menu > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: #1b2119;
  color: var(--text);
  font-weight: 650;
  list-style: none;
  cursor: pointer;
}
.choice-menu > summary::-webkit-details-marker {
  display: none;
}
.choice-menu > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.choice-menu[open] > summary {
  border-color: var(--lime);
}
.choice-menu[open] > summary::after {
  transform: translateY(2px) rotate(225deg);
}
.choice-menu > summary:focus-visible,
.choice-options button:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}
.choice-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.choice-options {
  position: absolute;
  z-index: 31;
  top: calc(100% + 5px);
  right: 0;
  width: max(100%, 190px);
  padding: 5px;
  border: 1px solid var(--line);
  background: #1b2119;
  box-shadow: 0 14px 30px #0008;
}
.choice-options button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: 12px;
  cursor: pointer;
}
.choice-options button:hover,
.choice-options button[aria-pressed="true"] {
  background: #2b3923;
  color: var(--lime);
}
.choice-options button[aria-pressed="true"]::after {
  content: "✓";
}
.gallery-sort {
  width: 180px;
  flex: 0 0 180px;
}
.gallery-sort .choice-options {
  width: max(100%, 170px);
}
.gallery.is-empty {
  display: block;
  min-height: 0;
}
.gallery-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 160px;
  padding: 26px 30px;
  border: 1px solid var(--line);
  background: var(--panel);
  text-align: left;
}
.gallery-empty-label {
  color: var(--lime);
  font:
    700 10px "Space Grotesk",
    sans-serif;
  letter-spacing: 0.06em;
}
.gallery-empty h2 {
  margin: 8px 0 6px;
  font:
    700 21px/1.2 "Space Grotesk",
    sans-serif;
}
.gallery-empty p {
  max-width: 540px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.gallery-empty-action {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line);
  background: #252d20;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.gallery-empty-action:hover {
  border-color: var(--lime);
  color: var(--lime);
}
@media (max-width: 600px) {
  .gallery-toolbar {
    flex-wrap: nowrap;
    align-items: center;
  }
  .gallery-toolbar > [role="status"] {
    white-space: nowrap;
  }
  .gallery-sort {
    width: min(160px, 49vw);
    flex: 0 0 auto;
    margin-left: auto;
  }
  .gallery-empty {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
    padding: 22px;
  }
  .gallery-empty h2 {
    font-size: 19px;
  }
  .gallery-empty-action {
    width: 100%;
  }
}

/* Live wall data sits directly below the canvas it describes. */
.wall-activity {
  margin: 24px 0 0;
  border: 1px solid var(--line);
  background: #ffffff02;
}
.wall-activity-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 22px;
  border-bottom: 1px solid var(--line);
}
.wall-activity-heading h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.wall-activity-heading small {
  color: var(--muted);
  font-size: 10px;
}
.wall-activity-heading .activity-live {
  display: flex;
  align-items: center;
  gap: 7px;
  font-variant-numeric: tabular-nums;
}
.activity-live > i,
.payment-heading #quote-status > i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  background: var(--lime);
  box-shadow: 0 0 8px #c1f77b80;
}
.activity-live.reconnecting > i {
  background: #f3c969;
  box-shadow: 0 0 0 3px rgba(243, 201, 105, 0.12);
}
.activity-live.reconnecting > span {
  color: #f3c969;
}
.activity-live > span {
  color: var(--lime);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
}
.activity-live > b {
  padding-left: 7px;
  border-left: 1px solid var(--line);
  color: var(--text);
  font-size: 10px;
  font-weight: 500;
}
.activity-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.activity-metrics > div {
  min-width: 0;
  padding: 22px;
}
.activity-metrics > div + div {
  border-left: 1px solid var(--line);
}
.activity-metrics span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  line-height: 1.4;
}
.activity-metrics strong {
  display: block;
  margin-top: 9px;
  color: var(--text);
  font:
    500 clamp(23px, 2.25vw, 32px) / 1.15 "Space Grotesk",
    sans-serif;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.activity-metrics strong small {
  display: inline;
  color: var(--muted);
  font: inherit;
  font-size: 0.58em;
  letter-spacing: 0;
}
.activity-metrics p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.activity-growth {
  padding: 19px 22px 15px;
  border-top: 1px solid var(--line);
  background: #a9e75e05;
}
.activity-growth-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.activity-growth-head > div:last-child {
  text-align: right;
}
.activity-growth-head span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
}
.activity-growth-head strong {
  display: block;
  margin-top: 4px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
}
.activity-growth-head > div:last-child strong {
  color: var(--lime);
  font-size: 16px;
}
.activity-growth .progress-track {
  height: 7px;
  margin-top: 16px;
}
.activity-growth .progress-track b {
  height: 13px;
  top: -3px;
}
.activity-growth-foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px 16px;
  margin-top: 11px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .wall-activity {
    margin-top: 18px;
  }
  .wall-activity-heading {
    flex-wrap: wrap;
    padding: 15px 16px;
  }
  .activity-metrics {
    grid-template-columns: minmax(0, 1fr);
  }
  .activity-metrics > div {
    padding: 16px;
  }
  .activity-metrics > div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .activity-metrics strong {
    font-size: 24px;
  }
  .activity-growth {
    padding: 17px 16px 14px;
  }
  .activity-growth-head {
    gap: 12px;
  }
  #inspector .selection-heading h2 {
    font-size: 23px;
  }
  .selection-facts {
    margin-top: 16px;
    padding-block: 12px;
  }
  #inspector .inspector-actions {
    margin: 16px -20px -20px;
    padding: 12px 20px max(16px, env(safe-area-inset-bottom));
  }
  .selection-summary {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
    padding-bottom: 4px;
  }
  .selection-summary .metric-label {
    grid-column: auto;
  }
  .selection-summary .metric-value {
    grid-column: 2;
    grid-row: 1;
    font-size: 18px;
    text-align: right;
    letter-spacing: -0.3px;
  }
  .selection-summary .metric-estimate {
    grid-column: 2;
    grid-row: 2;
  }
  #inspector .selection-summary .metric-note {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    font-size: 10px;
  }
  .artwork-metrics {
    margin-top: 16px;
  }
  .artwork-metrics > :is(.artwork-backing, .value-panel, .artwork-earned) {
    padding-block: 14px;
  }
  .artwork-metrics > :is(.artwork-backing, .value-panel) > strong {
    font-size: 25px;
  }
  .modal-header,
  .has-modal-footer .modal-header {
    padding: 12px 24px;
    gap: 10px;
  }
  .modal-header h2,
  .editor-dialog .modal-header h2 {
    font-size: 20px;
  }
  .editor-dialog .modal-header {
    padding: 10px 16px;
  }
  .modal-body {
    padding-top: 20px;
  }
  .creation-choices {
    margin-block: 20px;
  }
  .creation-choice {
    padding: 16px;
  }
  .creation-choice .choice-icon {
    margin-bottom: 4px;
  }
  .gallery .art-card .card-value {
    font-size: 13px !important;
    padding-top: 10px;
    margin-top: 12px;
  }
  .gallery .art-card .card-rewards {
    font-size: 11px;
    margin-top: 8px;
  }
  .transaction-notes {
    padding-inline: 12px;
  }
  .transaction-notes > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .environment-note {
    font-size: 10px;
  }
}
@media (max-width: 380px) {
  .modal-header,
  .has-modal-footer .modal-header {
    padding-inline: 20px;
  }
  .editor-dialog .modal-header {
    padding-inline: 16px;
  }
  .modal-header h2,
  .editor-dialog .modal-header h2 {
    font-size: 18px;
    letter-spacing: -0.5px;
  }
  .selection-summary .metric-value {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-loading-spinner {
    animation-duration: 1.8s;
  }
}

/* Compact informational rows stay attached to the decision they describe. */
.rate-note {
  margin: 20px 0;
  padding-block: 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.rate-note > strong {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.rate-note > strong > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}
#inspector .rate-note > p {
  font-size: 11px;
  margin: 7px 0 0;
}
#draft-estimate {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
#draft-estimate .selection-summary {
  padding-bottom: 0;
}
.transaction-summary {
  margin-top: 24px;
}
.creation-steps + .transaction-summary {
  margin-top: 0;
}
.transaction-summary .receipt {
  margin-bottom: 0;
  padding-inline: 0;
  border-width: 1px 0;
  background: transparent;
}
.payment-panel {
  margin-top: 20px;
  border: 1px solid var(--line);
  background: #ffffff02;
}
.payment-heading {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.payment-heading > strong {
  font-size: 12px;
  font-weight: 600;
}
.payment-heading #quote-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
}
.payment-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}
.payment-methods > button {
  min-width: 0;
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: #151a14;
  text-align: left;
}
.payment-methods > button:hover:not(:disabled) {
  filter: none;
  border-color: #657856;
  background: #1c2419;
}
.payment-methods > button.active {
  border-color: var(--lime);
  background: #222d1c;
  box-shadow: inset 3px 0 0 var(--lime);
}
.payment-methods strong {
  font-size: 13px;
}
.payment-methods small {
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.payment-quote {
  margin: 0 12px 12px;
  padding: 2px 12px;
  border-top: 1px solid var(--line);
}
.payment-quote > div {
  min-height: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
}
.payment-quote > div + div {
  border-top: 1px solid #293026;
}
.payment-quote strong {
  color: var(--text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.payment-quote .payment-total strong {
  color: var(--lime);
  font-size: 14px;
}
.payment-quote > p {
  margin: 8px 0 10px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}
.payment-quote > p b {
  color: var(--text);
  font-weight: 500;
}
.payment-reassurance {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}
.payment-available-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid #4c5b40;
  color: #c4d0b9;
  font-size: 11px;
  line-height: 1.5;
}
.artwork-actions .owner-rewards-note {
  margin: 0 0 12px;
}
.artwork-actions .quiet-caption {
  text-align: left;
}
/* Keep estimates attached to the amount, including the canvas-size dialog. */
.selection-summary .metric-note {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.modal-body .selection-summary .metric-note {
  font-size: 11px;
}
.selection-summary > .metric-value,
.selection-summary > .metric-estimate {
  grid-column: 1 / -1;
  text-align: left;
}
.modal-body .environment-note {
  font-size: 11px;
}
@media (max-width: 760px) {
  #inspector > .creation-steps:first-child {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  #inspector > .section-label {
    margin-bottom: 8px;
  }
  #inspector .selection-heading h2 {
    font-size: 21px;
    margin-bottom: 4px;
  }
  #inspector .selection-heading p {
    font-size: 11px;
    line-height: 1.4;
  }
  #inspector .selection-facts {
    margin-top: 12px;
    padding-block: 8px;
    gap: 12px;
  }
  #inspector .selection-facts dd {
    margin-top: 2px;
    font-size: 12px;
  }
  #inspector .selection-summary > .metric-value,
  #inspector .selection-summary > .metric-estimate {
    grid-column: 2;
    text-align: right;
  }
  .modal-body .selection-summary .metric-value {
    grid-row: auto;
  }
  .modal-body .selection-summary .metric-estimate {
    grid-row: auto;
  }
  .modal-body .selection-summary .metric-note {
    margin-top: 5px;
  }
}
/* Account: available rewards lead; required $MAP and past claims sit alongside. */
@media (min-width: 1000px) {
  .rewards-card {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: 28px;
  }
  .rewards-card .rewards-top {
    min-width: 0;
    gap: 20px;
    align-items: center;
  }
  .rewards-card .rewards-top p {
    max-width: 38ch;
  }
  .rewards-card .account-balances {
    margin: 0;
    padding: 4px 0 4px 28px;
    border-top: 0;
    border-bottom: 0;
    border-left: 1px solid var(--line);
    align-content: center;
  }
  .rewards-card .reward-explanation {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
    margin-top: 22px;
    padding-top: 16px;
  }
}
.modal-body .size-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.modal-body .size-option {
  min-width: 0;
}
dialog.canvas-size-dialog {
  width: 620px;
}
.canvas-size-dialog .size-options {
  margin-block: 20px 16px;
  gap: 8px;
}
.canvas-size-dialog .size-option {
  min-height: 102px;
  padding: 14px 8px;
  gap: 6px;
}
.canvas-size-dialog .size-option strong {
  font-size: 17px;
}
.canvas-size-dialog .size-option small {
  font-size: 11px;
}
.canvas-size-dialog .size-option span {
  font-size: 10px;
}
.dimension-fields {
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  background: #ffffff02;
}
.dimension-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.dimension-heading strong {
  font-size: 12px;
}
.dimension-heading span {
  color: var(--muted);
  font-size: 10px;
}
.dimension-fields .coord-fields {
  margin-top: 12px;
}
.canvas-size-dialog #draft-estimate {
  margin-top: 18px;
  padding-top: 18px;
}
@media (max-width: 760px) {
  .canvas-size-dialog .size-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .canvas-size-dialog .size-option {
    min-height: 78px;
    padding-block: 10px;
  }
  .dimension-heading {
    display: block;
  }
  .dimension-heading span {
    display: block;
    margin-top: 3px;
  }
  #inspector > .creation-steps:first-child {
    margin-bottom: 8px;
    padding-bottom: 8px;
  }
  #inspector .selection-facts {
    margin-top: 8px;
  }
}
@media (max-width: 380px) {
  .canvas-size-dialog .size-options {
    gap: 6px;
  }
  .canvas-size-dialog .size-option {
    padding-inline: 4px;
  }
  .canvas-size-dialog .size-option small {
    font-size: 10px;
    white-space: normal;
  }
  .canvas-size-dialog .size-option strong {
    font-size: 17px;
  }
}

/* Supporting copy aligns with its controls; footers carry the decision. */
.modal-body > .receipt:first-child {
  margin-top: 0;
}
.modal-body > p:first-child {
  margin-top: 0;
}
.choice-alternative .quiet-caption {
  text-align: left;
  font-size: 11px;
  line-height: 1.6;
  margin: 0 0 8px;
}
.choice-alternative > .text-button {
  text-align: left;
  width: auto;
}
.has-modal-footer #modal-content > .modal-actions {
  gap: 12px;
  padding-block: 16px;
}
.transaction-summary .receipt > div {
  min-height: 44px;
  padding-block: 12px;
}
@media (max-width: 760px) {
  .creation-steps,
  .modal-body .creation-steps {
    gap: 8px;
  }
  .creation-steps li:not(:last-child)::after {
    width: 12px;
    margin-left: 2px;
  }
}

.artwork-actions .primary {
  color: #172109;
}
.artwork-visual {
  align-self: start;
  aspect-ratio: 1;
  min-height: 0;
}
.studio-settings {
  padding: 16px;
  border: 1px solid var(--line);
  background: #ffffff03;
  align-self: start;
}
.studio-settings .upload-label {
  margin-top: 20px;
}
.studio-settings .editor-footnote {
  text-align: left;
  margin: 8px 0 0;
  line-height: 1.6;
}
.artwork-actions .quiet-caption,
.choice-alternative .quiet-caption {
  margin-top: 8px !important;
}
@media (max-width: 760px) {
  .studio-settings {
    gap: 12px;
    padding: 16px;
  }
  .studio-settings .upload-label {
    margin-top: 0;
  }
  .studio-settings .editor-footnote {
    margin: 0;
  }
}

#first-import-status {
  text-align: left;
  font-size: 11px;
  line-height: 1.6;
  margin: -8px 0 0 !important;
}
@media (min-width: 761px) and (max-width: 999px) {
  .studio-main .palette {
    grid-template-columns: repeat(9, 28px);
    gap: 6px;
  }
  .studio-main .swatch {
    min-height: 0;
  }
}
@media (min-width: 1000px) {
  .studio-main .palette {
    grid-template-columns: repeat(18, minmax(0, 1fr));
    gap: 6px;
    margin: 16px 0 12px;
  }
  .studio-main .swatch {
    min-height: 0;
  }
}

/* Mobile navigation is a compact disclosure; desktop keeps the page tabs. */
.mobile-menu-toggle {
  display: none;
}
body[data-site="prelaunch"] .topbar .wallet .muted {
  display: none;
}
.menu-close {
  display: none;
}
@media (max-width: 760px) {
  .topbar {
    position: relative;
    z-index: 20;
    min-height: 66px;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 44px;
    grid-template-rows: auto;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
  }
  .topbar .brand {
    grid-column: 1;
    grid-row: 1;
    font-size: 23px;
    gap: 7px;
  }
  .topbar .header-end {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }
  .topbar .wallet {
    min-height: 44px;
    gap: 5px;
    padding-inline: 9px;
    font-size: 11px;
  }
  .topbar .mobile-menu-toggle {
    grid-column: 3;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    color: var(--text);
    background: var(--panel);
  }
  .mobile-menu-toggle[aria-expanded="true"] {
    border-color: var(--lime);
    color: var(--lime);
  }
  .mobile-menu-toggle[aria-expanded="true"] .menu-lines {
    display: none;
  }
  .mobile-menu-toggle[aria-expanded="true"] .menu-close {
    display: block;
  }
  .topbar nav {
    position: absolute;
    top: 100%;
    left: 12px;
    right: 12px;
    display: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--line);
    background: #171b16;
    box-shadow: 0 16px 32px #0006;
    gap: 4px;
  }
  body[data-site="prelaunch"] .topbar nav {
    top: calc(100% + 6px);
  }
  .topbar.menu-open nav {
    display: grid;
    grid-template-columns: 1fr;
  }
  .topbar .nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    min-height: 48px;
    height: auto;
    padding: 12px 14px;
    font-size: 14px;
    text-align: left;
  }
  .topbar .nav-item.active {
    background: #2a351f;
    color: var(--lime);
  }
  .topbar .nav-item.active::after {
    display: none;
  }
  .topbar .nav-item span {
    margin-left: 8px;
    padding: 2px 6px;
    font-size: 12px;
  }
  main {
    padding-top: 18px;
  }
  .empty-state .empty-actions {
    width: min(100%, 260px);
  }
  .empty-state .empty-actions > button {
    width: 100%;
  }
}
@media (max-width: 420px) {
  .wall-actions #fullscreen-button {
    flex: 0 0 38px;
    width: 38px;
    padding-inline: 0;
    font-size: 0;
  }
  .wall-actions #fullscreen-button::before {
    content: "⛶";
    font-size: 14px;
  }
  .wall-actions #help-button {
    flex-basis: 38px;
    width: 38px;
  }
}
@media (max-width: 350px) {
  .topbar .brand {
    font-size: 20px;
  }
  .topbar .wallet {
    padding-inline: 8px;
  }
  .topbar .nav-item {
    padding-inline: 9px;
  }
}

@media (max-width: 760px) {
  .payment-panel {
    margin-top: 16px;
  }
  .payment-methods,
  .payment-heading {
    padding-inline: 10px;
  }
  .payment-quote {
    margin-inline: 10px;
    padding-inline: 8px;
  }
  body:has(.wall-layout:not(.panel-collapsed):not(.panel-hidden)) .wall-activity {
    display: none;
  }
}

/* Low-emphasis actions keep a full, comfortable hit area when highlighted. */
.text-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid transparent;
  line-height: 1.4;
  transition:
    color 120ms ease,
    background-color 120ms ease,
    border-color 120ms ease;
}
.text-button:hover:not(:disabled) {
  filter: none;
  color: var(--text);
  background: #20261c;
  border-color: #3f4a38;
}
.text-button:active:not(:disabled) {
  background: #283321;
  border-color: #536348;
}
#inspector .inspector-actions > .text-button,
.choice-alternative > .text-button {
  padding-inline: 10px;
}

/* File actions read as one balanced row instead of two labels at the edges. */
.artwork-actions .artwork-file-actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.artwork-actions .artwork-file-actions button {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  justify-content: flex-start;
}
.artwork-actions .artwork-file-actions button:last-child {
  justify-content: flex-end;
}
@media (max-width: 360px) {
  .artwork-actions .artwork-file-actions {
    flex-direction: column;
  }
  .artwork-actions .artwork-file-actions button,
  .artwork-actions .artwork-file-actions button:last-child {
    width: 100%;
    justify-content: flex-start;
  }
}

.reservation-progress {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.transaction-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
}
.transaction-steps .current {
  color: var(--text);
  font-weight: 700;
}
.transaction-steps .complete {
  color: var(--lime);
}
.reservation-progress p {
  font-size: 13px;
  line-height: 1.6;
  margin: 8px 0;
}
.transaction-link {
  color: var(--lime);
  display: inline-block;
  padding: 8px 0;
  font-size: 12px;
}
.pending-reservation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  font-size: 13px;
}
@media (max-width: 540px) {
  .pending-reservation {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
}

/* Creation studio: canvas first, a single organized tool rail, persistent actions. */
html:has(dialog[open]) {
  overflow: hidden;
}
.editor-dialog {
  width: 1060px;
  max-width: min(96vw, 1060px);
  padding: 0;
  overflow: hidden;
}
.editor-dialog .studio-body {
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 24px;
  padding: 20px 24px;
}
.editor-dialog .studio-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.editor-dialog .studio-main .editor-stage {
  height: clamp(300px, 50vh, 540px);
  flex: 1;
  min-height: 300px;
}
.editor-dialog .studio-settings {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 0 0 24px;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  align-self: stretch;
}
.studio-control-group {
  min-width: 0;
}
.studio-control-group h3,
.editor-dialog .brush-size-control > span {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 1px;
}
.editor-dialog .studio-settings .editor-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  gap: 6px;
  position: static;
}
.editor-dialog .studio-settings .editor-tools .chip {
  min-height: 36px;
  padding: 8px 6px;
  font-size: 12px;
}
.editor-dialog .editor-tools .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.studio-tool-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.editor-dialog .studio-fill {
  grid-column: 1 / -1;
}
.editor-dialog .brush-size-control {
  display: block;
  margin: 0;
}
.editor-dialog .brush-size-control > span {
  display: block;
}
.editor-dialog .brush-sizes {
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.editor-dialog .studio-settings .palette {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 12px;
}
.editor-dialog .studio-settings .swatch {
  width: 100%;
  min-height: 0;
}
.editor-dialog .studio-settings .custom-color-field {
  font-size: 12px;
  margin: 0;
  display: flex;
  justify-content: space-between;
}
.editor-dialog .studio-settings .color-input {
  width: 48px;
  height: 30px;
  margin: 0;
}
.editor-dialog .studio-settings .upload-label {
  position: relative;
  overflow: hidden;
  margin: 0;
  min-height: 40px;
  padding: 12px;
  font-size: 12px;
}
/* Keep the native input inside its label; it must never cover the footer. */
.upload-label {
  position: relative;
  overflow: hidden;
}
.upload-label input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  cursor: pointer;
  opacity: 0;
}
.studio-history {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.studio-history > div {
  display: flex;
  gap: 8px;
}
.studio-history button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text);
  border: 1px solid var(--line);
  background: #11170f;
}
.studio-history .edit-history {
  margin-left: auto;
}
.studio-history .edit-history button {
  min-width: 88px;
}
.editor-dialog .mobile-brush-size {
  display: none;
}
.studio-history button:disabled {
  opacity: 0.45;
  cursor: default;
}
.studio-history button:hover:not(:disabled) {
  background: #ffffff0a;
}
.editor-dialog .editor-actions {
  position: relative;
  z-index: 2;
  padding: 16px 24px;
}
.editor-dialog .studio-buttons {
  gap: 10px;
}
@media (max-width: 760px) {
  .editor-dialog {
    width: 100%;
    max-width: 100%;
  }
  .editor-dialog .studio-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
  }
  .editor-dialog .studio-main .editor-stage {
    height: clamp(200px, 32dvh, 320px);
    min-height: 200px;
    flex: none;
  }
  .editor-dialog .studio-settings {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 16px 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .editor-dialog .studio-settings > .field:first-child {
    grid-column: 1 / -1;
  }
  .editor-dialog .studio-settings > .studio-control-group:nth-of-type(2),
  .editor-dialog .studio-settings > .upload-label {
    grid-column: 1 / -1;
  }
  .editor-dialog .studio-settings .palette {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .editor-dialog .studio-settings > .studio-control-group:first-of-type,
  .editor-dialog .studio-settings > .brush-size-control {
    grid-column: 1 / -1;
  }
  .editor-dialog .brush-sizes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .editor-dialog .brush-sizes button {
    min-height: 38px;
    border: 1px solid var(--line);
  }
  .editor-dialog .studio-history {
    align-items: center;
  }
  .editor-dialog .studio-history .editor-message {
    font-size: 11px;
    max-width: 46%;
  }
  .editor-dialog .editor-actions {
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  }
}

/* Persistent feedback uses the same hierarchy for every wallet action. */
.wallet-action-progress {
  padding: 18px 0;
  border-block: 1px solid var(--line);
}
.wallet-action-progress p {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
}
.wallet-action-progress .transaction-steps {
  gap: 8px 18px;
  margin: 0;
}
.wallet-action-progress .inline-error {
  padding: 12px;
  background: #382621;
  border-left: 2px solid #ce9f98;
}
.draft-location-note {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
}
.wall-gesture {
  color: var(--muted);
  font-size: 12px;
  margin-right: auto;
}
.canvas-controls {
  flex-wrap: wrap;
}
@media (max-width: 760px) {
  .canvas-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 8px;
  }
  .canvas-controls .tool-group {
    grid-column: 1;
    grid-row: 1;
  }
  .canvas-controls .zoom-group {
    grid-column: 2;
    grid-row: 1;
  }
  .canvas-controls .wall-gesture {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0 2px 5px;
    font-size: 11px;
  }
  body:not(.is-creating) .canvas-controls .wall-gesture {
    grid-column: 1;
    grid-row: 1;
    padding-bottom: 0;
  }
  .is-creating #inspector .draft-preview {
    display: none;
  }
  #inspector .selection-heading {
    margin-top: 10px;
  }
  #inspector .draft-location-note {
    font-size: 10px;
  }
  .wallet-action-dialog .modal-actions {
    flex-wrap: wrap;
  }
  .wallet-action-dialog .modal-actions button {
    flex: 1 1 130px;
  }
}

@media (max-width: 760px) {
  /* Dimensions and preview state already appear on the wall during placement. */
  #inspector.draft-inspector > .creation-steps,
  #inspector.draft-inspector > .section-label,
  #inspector.draft-inspector > .selection-facts {
    display: none;
  }
  #inspector.draft-inspector .selection-heading {
    margin-top: 0;
    padding-right: 28px;
  }
}

/* A single creation entrance and optional detail, with the wall kept central. */
.simple-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0 16px;
}
.simple-choices .creation-choice {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  grid-template-rows: auto auto;
  gap: 4px 14px;
  align-items: center;
  padding: 16px;
}
.simple-choices .creation-choice .choice-icon {
  grid-column: 1;
  grid-row: 1 / 3;
  margin: 0;
  width: 36px;
  height: 36px;
}
.simple-choices .creation-choice strong {
  grid-column: 2;
  grid-row: 1;
  font-size: 15px;
}
.simple-choices .creation-choice small {
  grid-column: 2;
  grid-row: 2;
  line-height: 1.5;
}
.simple-choices .creation-choice > b {
  grid-column: 3;
  grid-row: 1 / 3;
  color: var(--lime);
}
.resume-creation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  margin-top: 18px;
  border: 1px solid var(--line);
}
.resume-creation > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.resume-creation strong {
  overflow-wrap: anywhere;
  font-size: 13px;
}
.resume-creation small {
  color: var(--muted);
  font-size: 11px;
}
.resume-creation button {
  flex-shrink: 0;
  font-size: 12px;
}
.rewards-card {
  display: block;
}
.rewards-card .account-details {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 12px;
}
.rewards-card .account-details > summary {
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  padding: 6px 0;
}
.rewards-card .account-details .account-balances {
  margin-top: 12px;
  padding: 12px 0;
  border: 0;
}
.rewards-card .reward-explanation {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}
.connect-draft-summary {
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 14px;
  margin: 0 0 16px;
  border: 1px solid #3b4933;
  background: #222a1f;
}
.connect-draft-art {
  width: 164px;
  height: 164px;
  border: 1px solid #3a4a32;
  background: repeating-conic-gradient(#25311d 0% 25%, #1d2816 0% 50%) 0 0/16px 16px;
}
#connect-draft-preview {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.connect-draft-details {
  display: grid;
  gap: 8px;
  align-content: center;
  min-width: 0;
}
.connect-draft-details > span {
  color: var(--lime);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.connect-draft-details strong {
  font-size: 20px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.connect-draft-details small {
  color: var(--muted);
  font-size: 12px;
}
.connect-reservation-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
@media (max-width: 540px) {
  .connect-draft-summary {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    padding: 10px;
  }
  .connect-draft-art {
    width: 112px;
    height: 112px;
  }
  .connect-draft-details {
    gap: 5px;
  }
  .connect-draft-details strong {
    font-size: 16px;
  }
}
@media (max-width: 380px) {
  .simple-choices .creation-choice {
    padding: 12px;
    gap: 4px 10px;
    grid-template-columns: 32px minmax(0, 1fr) 16px;
  }
  .simple-choices .creation-choice .choice-icon {
    width: 30px;
    height: 30px;
  }
  .resume-creation {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
}

.gallery .card-by {
  display: none;
}
@media (max-width: 760px) {
  body[data-page="explore"] .gallery .card-by {
    display: inline;
  }
  body[data-page="explore"] .gallery .art-card .card-description,
  body[data-page="explore"] .gallery .art-card .art-meta > p {
    display: none;
  }
}

.wall-drawing-dialog #paint-surface {
  background: #293220;
}
#wall-context {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
}
.wall-drawing-dialog #paint-canvas {
  position: relative;
  z-index: 1;
}
.wall-drawing-dialog #paint-grid {
  z-index: 2;
}
.wall-drawing-dialog #brush-preview {
  z-index: 3;
}
.wall-drawing-dialog .upload-label[hidden] {
  display: none;
}
.wall-drawing-dialog .studio-viewportbar > span {
  letter-spacing: 0.5px;
}

/* Map navigation is beside the map, including on small screens. */
.editor-dialog .studio-viewportbar {
  flex-wrap: wrap;
  gap: 8px;
}
.editor-dialog .studio-viewportbar > span:empty {
  display: none;
}
.wall-editor-modes {
  display: flex;
  border: 1px solid var(--line);
  padding: 3px;
  gap: 2px;
}
.wall-editor-modes button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--muted);
}
.wall-editor-modes button.active {
  color: var(--lime);
  background: #283821;
  box-shadow: inset 0 -2px var(--lime);
}
.wall-editor-modes button:hover {
  background: #283821;
  color: var(--text);
}
.wall-editor-modes .studio-tool-icon {
  width: 15px;
  height: 15px;
}
.editor-dialog .editor-zoom {
  margin-left: auto;
}
.editor-dialog .editor-zoom #paint-fit {
  width: auto;
  padding: 0 10px;
  white-space: nowrap;
}
.editor-dialog .studio-history .editor-message {
  flex: 1 0 100%;
  order: 3;
  max-width: none;
  margin: 0;
  font-size: 11px;
}
.editor-dialog #paint-focus {
  font-size: 12px;
  padding: 6px 10px;
  min-height: 36px;
}
.editor-dialog .studio-settings [data-brush="pick"] {
  grid-column: 1 / -1;
}
@media (max-width: 760px) {
  .editor-dialog .wall-editor-modes button {
    min-height: 40px;
    padding: 6px 10px;
  }
  .editor-dialog .editor-zoom button {
    min-height: 40px;
  }
  .editor-dialog .editor-zoom output {
    display: none;
  }
  .editor-dialog #paint-focus,
  .editor-dialog .studio-history button {
    min-height: 40px;
  }
}
/* Zoom expands the scrollable world, never the viewport or the modal itself. */
.editor-dialog .studio-cost-caption {
  display: grid;
  align-content: start;
  gap: 2px;
  line-height: 1.4;
  min-height: calc(2.8em + 2px);
}
.editor-dialog .studio-cost-caption > span {
  min-width: 0;
}
.editor-dialog .studio-cost-caption > span[hidden] {
  display: none;
}
.editor-dialog #draft-save-status:not([hidden]) {
  margin: 4px 0 0;
  color: #ffaaa0;
  font-size: 11px;
  line-height: 1.4;
}
.editor-dialog .studio-body {
  align-content: start;
  grid-auto-rows: max-content;
}
.editor-dialog .studio-main .editor-stage {
  flex: 0 0 auto;
  height: clamp(280px, 44dvh, 480px);
}
@media (max-width: 760px) {
  .editor-dialog .studio-main .editor-stage {
    height: clamp(220px, 32dvh, 320px);
    min-height: 220px;
  }
}

/* The same controls move into a compact mobile dock; state and handlers are shared. */
.wall-quick-tools[hidden],
#editor-more[hidden] {
  display: none;
}
.editor-options,
.editor-colors {
  width: min(360px, calc(100vw - 24px));
  max-height: 80dvh;
  padding: 20px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
}
.editor-options::backdrop,
.editor-colors::backdrop {
  background: #050805aa;
}
.editor-options-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.editor-options-heading h2 {
  font-size: 19px;
  margin: 0;
}
.editor-options-heading button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  flex: 0 0 44px;
}
.editor-dialog .editor-options .studio-settings {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 0;
  border: 0;
  gap: 20px;
}
.editor-options .studio-control-group:last-of-type {
  display: none;
}
.editor-colors .palette {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 3px;
  overflow: visible;
}
.editor-colors .palette .swatch {
  width: 100%;
  height: auto;
  min-height: 44px;
  aspect-ratio: 1;
}
.editor-colors .custom-color-field {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 20px 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--text);
}
.editor-colors .custom-color-field .color-input {
  width: 64px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  cursor: pointer;
}
.editor-colors #done-editor-colors {
  width: 100%;
  min-height: 44px;
}
.editor-colors {
  padding: 16px;
}
.editor-colors .editor-options-heading {
  margin-bottom: 12px;
}
.current-color-swatch {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1px solid #ffffff45;
}
@media (max-width: 760px) {
  .editor-dialog .modal-header {
    padding: 8px 12px;
  }
  .editor-dialog .studio-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    padding: 10px 12px;
  }
  .editor-dialog .studio-main {
    flex: 1;
    min-height: 0;
    width: 100%;
  }
  .editor-dialog .studio-viewportbar {
    flex-shrink: 0;
    margin-bottom: 8px;
  }
  .editor-dialog .studio-main .editor-stage {
    flex: 1 1 0;
    height: 0;
    min-height: 120px;
    contain: size;
  }
  .wall-quick-tools {
    flex-shrink: 0;
    display: grid;
    gap: 8px;
    padding-top: 10px;
  }
  .quick-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .quick-brushes {
    display: flex;
    gap: 6px;
  }
  .quick-brushes button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    min-width: 72px;
    padding: 8px;
    font-size: 12px;
  }
  .quick-brushes button.active {
    color: var(--lime);
    background: #283821;
    border-color: var(--lime);
  }
  .quick-brushes .studio-tool-icon {
    width: 16px;
    height: 16px;
  }
  .wall-quick-tools .quick-sizes {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
  }
  .quick-sizes .brush-size-control > span,
  .quick-sizes .brush-sizes {
    display: none;
  }
  .editor-dialog .mobile-brush-size {
    display: block;
    width: 84px;
  }
  .mobile-brush-size > summary {
    min-height: 44px;
    padding: 0 9px;
  }
  .mobile-brush-size .choice-options {
    top: auto;
    bottom: calc(100% + 5px);
    width: 100px;
  }
  .quick-colors {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
  }
  .wall-quick-tools.no-upload .quick-colors {
    grid-template-columns: 1fr 1fr;
  }
  .quick-colors button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 12px;
  }
  .quick-colors button[aria-expanded="true"] {
    color: var(--lime);
    border-color: var(--lime);
  }
  .editor-dialog .studio-history {
    flex-shrink: 0;
    gap: 8px;
    margin-top: 8px;
  }
  .editor-dialog .studio-history button {
    padding: 8px 10px;
    font-size: 12px;
  }
  .editor-dialog .studio-history .edit-history {
    gap: 6px;
  }
  .editor-dialog .studio-history .edit-history button {
    min-width: 78px;
  }
  .editor-dialog .studio-history .editor-message {
    font-size: 10px;
    line-height: 1.4;
  }
  .editor-dialog .editor-actions {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    padding: 8px 12px max(8px, env(safe-area-inset-bottom));
  }
  .editor-dialog .studio-buttons {
    display: contents;
  }
  .editor-dialog .studio-price {
    grid-column: 1;
    grid-row: 1;
  }
  .editor-dialog .editor-actions .studio-price small {
    font-size: 11px;
    max-width: none;
  }
  .editor-dialog .studio-buttons #save-art {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-height: 42px;
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* A reserved blank spot starts with an explicit image-or-drawing decision. */
.reserved-creation-start .creation-choices {
  margin-bottom: 14px;
}
.reserved-creation-start > .quiet-caption {
  margin: 0;
  text-align: left;
  font-size: 11px;
}
@media (max-width: 760px) and (max-height: 620px) {
  .editor-dialog .studio-main .editor-stage {
    min-height: 100px;
  }
  .editor-dialog .studio-history .editor-message {
    display: none;
  }
}

/* Artwork ownership: edit first, amounts together, exit clearly separated. */
.artwork-edit-primary {
  margin-top: 16px;
}
.artwork-exit {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 16px;
}
.artwork-exit .release-action {
  background: transparent;
  border: 0;
  padding: 10px 0;
  color: var(--muted);
  text-align: left;
}
.artwork-exit .release-action span {
  color: #ce9f98;
}
.artwork-exit .release-action:hover {
  background: #ffffff08;
  padding-inline: 10px;
}
#view-my-rewards {
  text-align: left;
  padding: 10px 0;
  font-size: 12px;
  color: var(--text);
}
#view-my-rewards:hover {
  color: var(--lime);
}
.reservation-dialog .reservation-total {
  padding: 0;
}
.reservation-dialog .reservation-total > strong {
  font-size: 30px;
  color: var(--text);
}
.reservation-dialog .reservation-total > strong small {
  font-size: 17px;
  color: var(--text);
  font-weight: 500;
}
.reservation-dialog .transaction-summary {
  padding-bottom: 0;
  margin-bottom: 20px;
}
.reservation-dialog .modal-body .creation-steps {
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.payment-quote .checkout-pay {
  padding: 14px 0;
}
.payment-quote .checkout-pay > strong {
  font-size: 22px;
  color: var(--lime);
}
.payment-quote .checkout-fees {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 10px;
}
.checkout-fees > div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-size: 12px;
}
.checkout-fees > div > span {
  color: var(--muted);
}
.checkout-fees > div > strong {
  text-align: right;
  font-size: 12px;
  font-weight: 500;
}
.payment-quote .checkout-explanation {
  font-size: 11px;
  line-height: 1.6;
  margin: 12px 0 0;
}
.reservation-return {
  padding: 14px 0 0;
  margin-top: 16px;
  border-top: 1px solid var(--line);
}
.reservation-return > strong {
  font-size: 13px;
}
.reservation-return > p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.reservation-dialog .environment-note {
  margin-top: 14px;
  font-size: 11px;
}
@media (max-width: 540px) {
  .reservation-dialog .reservation-total > strong {
    font-size: 25px;
  }
  .payment-quote .checkout-pay > strong {
    font-size: 19px;
  }
  .checkout-fees > div {
    gap: 12px;
  }
}
.payment-quote > .checkout-fees {
  grid-template-columns: minmax(0, 1fr);
}

/* Touch creation: visible mode names and comfortable targets. */
#stage {
  touch-action: none;
}
@media (max-width: 760px) {
  .is-creating .canvas-controls {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }
  .is-creating .canvas-controls .tool-group {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-content: flex-start;
  }
  .is-creating .canvas-controls .zoom-group {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
  .is-creating .canvas-controls .wall-gesture {
    grid-column: 1;
    grid-row: 2;
    padding: 0;
    line-height: 1.4;
  }
  .is-creating .tool {
    width: auto;
    min-width: 90px;
    min-height: 44px;
    padding: 0 12px;
    gap: 7px;
  }
  .is-creating .tool-label {
    display: inline;
    font-size: 12px;
  }
  .is-creating #tool-hint,
  .is-creating .tool-divider {
    display: none;
  }
  .is-creating .zoom-group button,
  .is-creating #square-toggle {
    min-width: 44px;
    min-height: 44px;
  }
  .editor-dialog .quick-brushes button,
  .editor-dialog .wall-editor-modes button,
  .editor-dialog .editor-zoom button,
  .editor-dialog .studio-history button {
    min-height: 44px;
  }
  .editor-dialog .modal-header .close-button {
    min-width: 44px;
    min-height: 44px;
  }
  .editor-dialog .editor-options .field input[type="text"] {
    font-size: 16px;
  }
}

/* Naming is a focused step after drawing, with the editor kept intact behind it. */
.editor-dialog.naming-artwork {
  width: 560px;
}
.artwork-name-step {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.artwork-name-body {
  overflow-y: auto;
  padding: 24px;
  display: grid;
  gap: 16px;
}
#name-preview {
  width: 100%;
  height: 160px;
  object-fit: contain;
  image-rendering: pixelated;
  border: 1px solid var(--line);
  background: #11170f;
}
.artwork-name-body p {
  font-size: 13px;
}
.artwork-name-body .field {
  margin: 0;
}
.artwork-name-body input {
  font-size: 16px;
}
.artwork-name-body .quiet-caption {
  margin: -6px 0 0;
  font-size: 12px;
  text-align: left;
}
.artwork-name-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  padding: 16px 24px;
}
@media (max-width: 760px) {
  .editor-dialog.naming-artwork {
    width: calc(100% - 24px);
    height: fit-content;
    max-height: calc(100dvh - 24px);
    margin: auto;
    border: 1px solid var(--line);
  }
  .editor-dialog.naming-artwork #modal-content {
    height: auto;
    max-height: calc(100dvh - 24px);
  }
  .artwork-name-body {
    padding: 16px;
    gap: 14px;
  }
  .artwork-name-actions {
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    margin-top: auto;
  }
  .artwork-name-actions button {
    flex: 1;
    min-height: 44px;
    padding: 10px 8px;
    font-size: 12px;
  }
}
@media (max-height: 650px) {
  .naming-artwork #name-preview {
    height: 96px;
  }
}

/* Resume, place and review keep the creation visible at each decision. */
.draft-resume-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  margin-bottom: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
}
#saved-draft-preview {
  width: 72px;
  height: 56px;
  flex: 0 0 72px;
  object-fit: contain;
  image-rendering: pixelated;
  background: #11170f;
}
.draft-resume-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.draft-resume-copy strong {
  font-size: 14px;
}
.draft-resume-copy span {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.draft-resume-copy small {
  font-size: 11px;
  color: var(--muted);
}
.draft-resume-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.draft-resume-actions button {
  min-height: 44px;
  white-space: nowrap;
}
.placement-guidance {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.placement-guidance h2 {
  margin: 0;
  font-size: 14px;
}
.placement-guidance .placement-banner {
  position: static;
  transform: none;
  max-width: 100%;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  text-align: left;
  font-size: 12px;
  line-height: 1.4;
}
.placement-guidance .placement-banner.invalid {
  color: #ffafa1;
}
.reservation-artwork {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
#reservation-artwork-preview {
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
  border: 1px solid var(--line);
  background: #11170f;
}
.reservation-artwork h3 {
  margin: 0 0 8px;
  font-size: 16px;
  overflow-wrap: anywhere;
}
.reservation-artwork .reservation-total > span {
  display: none;
}
.reservation-artwork .reservation-total > strong {
  font-size: 24px;
}
.reservation-artwork .reservation-total p {
  font-size: 12px;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .draft-resume-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    margin-bottom: 14px;
  }
  #saved-draft-preview {
    width: 56px;
    height: 56px;
  }
  .draft-resume-actions {
    grid-column: 1 / -1;
    justify-content: space-between;
  }
  .draft-resume-actions .secondary {
    flex: 1;
  }
  .placement-guidance {
    padding: 8px 10px;
  }
  .placement-guidance h2 {
    font-size: 13px;
  }
  .placement-guidance .placement-banner {
    font-size: 11px;
  }
  .reservation-artwork {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
  }
  #reservation-artwork-preview {
    width: 72px;
    height: 72px;
  }
  .reservation-artwork .reservation-total > strong {
    font-size: 22px;
  }
}

.reservation-lock-amount {
  display: block;
  color: var(--lime);
  font-size: 16px;
  font-weight: 650;
}
.reservation-rate {
  display: inline;
  color: var(--muted);
  font-size: 11px;
}
.reservation-rate::before {
  content: " · ";
  white-space: pre;
}

/* Territory navigation stays separate from selection and zoom. */
.canvas-controls .center-button {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 10px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--muted);
}
.canvas-controls .center-button:hover {
  color: var(--lime);
  background: #283821;
}
.editor-dialog .editor-zoom #paint-focus {
  width: auto;
  padding: 0 8px;
  font-size: 12px;
}
@media (max-width: 760px) {
  .canvas-controls .center-button {
    min-height: 44px;
    width: 36px;
    padding: 6px;
    justify-content: center;
  }
  .canvas-controls .center-button span {
    display: none;
  }
  .is-creating .zoom-group {
    gap: 0;
  }
  .is-creating .zoom-group output {
    min-width: 30px;
    font-size: 10px;
  }
}

/* Image sizing is part of framing, always visible and usable on small screens. */
.editor-dialog.importing-image {
  width: 800px;
  max-width: min(96vw, 800px);
}
.importing-image .crop-resolution .quick-sizes {
  width: 100%;
  max-width: none;
  min-width: 0;
}
.importing-image .crop-resolution .chip {
  white-space: nowrap;
  min-height: 40px;
}
.importing-image .crop-proportions[aria-pressed="false"] {
  color: var(--muted);
  border-color: var(--line);
}
.importing-image .crop-size-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.importing-image .crop-size-heading span {
  color: var(--muted);
  font-size: 12px;
}
.importing-image .crop-resolution .quick-sizes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.importing-image .crop-size-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: end;
  margin-top: 12px;
}
.importing-image .crop-size-fields label {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}
.importing-image .crop-size-fields label > span {
  float: right;
}
.importing-image .crop-size-fields input {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 6px;
  height: 42px;
}
.importing-image .crop-proportions {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-size: 12px;
}
.importing-image .crop-proportions[aria-pressed="true"] {
  color: var(--lime);
  border-color: var(--lime);
}
.importing-image input[aria-invalid="true"] {
  border-color: #e5a68a;
}
.importing-image .crop-resolution .inline-error {
  color: #e5a68a;
}
@media (max-width: 760px) {
  .editor-dialog.importing-image {
    width: 100%;
    max-width: 100%;
    height: fit-content;
    margin: auto;
  }
  .editor-dialog.importing-image #modal-content {
    height: auto;
  }
  .editor-dialog.importing-image #import-workspace {
    flex: 0 1 auto;
  }
  .importing-image .crop-stage {
    height: clamp(140px, 25dvh, 220px);
    min-height: 140px;
  }
  .importing-image .crop-size-heading {
    flex-wrap: wrap;
    gap: 4px;
  }
  .importing-image .crop-size-fields {
    gap: 8px;
  }
  .importing-image .crop-footer {
    align-items: stretch;
  }
  .importing-image .crop-footer .studio-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .importing-image .crop-footer .studio-buttons button {
    min-width: 0;
    padding-inline: 10px;
    font-size: 12px;
  }
  .importing-image .crop-footer .studio-buttons:not(:has(#edit-import)) {
    grid-template-columns: auto 1fr;
  }
}

/* Native selects retain their keyboard behavior with a consistently inset arrow. */
body select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23c1ccb7' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px 8px;
  background-position: right 12px center;
}
body select:not([multiple]):not([size]):disabled {
  opacity: 0.5;
}

/* Canvas interaction and navigation form one calm, aligned toolbar. */
.editor-dialog .studio-viewportbar {
  gap: 10px;
}
.editor-dialog .wall-editor-modes,
.editor-dialog .editor-zoom {
  padding: 0;
  gap: 0;
  background: #11170f;
}
.editor-dialog .wall-editor-modes button {
  min-height: 40px;
  padding: 8px 12px;
}
.editor-dialog .editor-zoom button {
  width: 40px;
  height: 40px;
  min-height: 40px;
}
.editor-dialog .editor-zoom #paint-fit,
.editor-dialog .editor-zoom #paint-focus {
  height: 40px;
  margin: 0;
  padding: 0 12px;
  font-size: 12px;
  border-left: 1px solid var(--line);
}
@media (max-width: 760px) {
  .editor-dialog .studio-viewportbar {
    gap: 8px;
  }
  .editor-dialog .wall-editor-modes button {
    min-height: 44px;
    padding: 8px 10px;
  }
  .editor-dialog .editor-zoom button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .editor-dialog .editor-zoom #paint-fit {
    height: 44px;
    padding-inline: 10px;
  }
  .wall-drawing-dialog .studio-viewportbar {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }
  .wall-drawing-dialog .wall-editor-modes {
    grid-column: 1 / 5;
    grid-row: 1;
  }
  .wall-drawing-dialog .wall-editor-modes button {
    flex: 1;
  }
  .wall-drawing-dialog .editor-zoom {
    display: contents;
  }
  .wall-drawing-dialog #paint-zoom-out,
  .wall-drawing-dialog #paint-zoom-in {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    background: #11170f;
  }
  .wall-drawing-dialog #paint-zoom-out {
    grid-column: 5;
    grid-row: 1;
  }
  .wall-drawing-dialog #paint-zoom-in {
    grid-column: 6;
    grid-row: 1;
  }
  .wall-drawing-dialog .editor-zoom #paint-fit,
  .wall-drawing-dialog .editor-zoom #paint-focus {
    width: 100%;
    height: 44px;
    margin: 0;
    border: 1px solid var(--line);
    background: #11170f;
  }
  .wall-drawing-dialog #paint-fit {
    grid-column: 1 / 4;
    grid-row: 2;
  }
  .wall-drawing-dialog #paint-focus {
    grid-column: 4 / 7;
    grid-row: 2;
  }
}

/* Saving and discarding are a deliberate exit choice, outside the drawing dock. */
dialog.editor-exit {
  width: 480px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  color: var(--text);
  background: var(--panel);
  overflow-y: auto;
}
.editor-exit::backdrop {
  background: #050805b8;
}
.editor-exit .modal-header {
  padding: 14px 24px;
  gap: 12px;
}
.editor-exit .modal-header h2 {
  font-size: 22px;
}
.editor-exit .modal-header button {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}
.editor-exit-body {
  padding: 20px 24px;
}
.editor-exit-body p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.editor-exit-body #exit-draft-error:not([hidden]) {
  margin-top: 12px;
  color: #ffaaa0;
}
.editor-exit-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 24px 24px;
}
.editor-exit-actions button {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 13px;
}
.editor-exit-actions #save-exit-draft {
  grid-column: 1 / -1;
}
.editor-exit-actions .danger {
  color: #ffb4a8;
  border-color: #705047;
  background: transparent;
}
.editor-exit-actions .danger:hover {
  background: #4b2e26;
}
@media (max-width: 760px) {
  .editor-exit .modal-header {
    padding: 10px 16px;
  }
  .editor-exit .modal-header h2 {
    font-size: 20px;
  }
  .editor-exit-body {
    padding: 16px;
  }
  .editor-exit-actions {
    grid-template-columns: 1fr;
    padding: 0 16px 16px;
    gap: 8px;
  }
  .editor-exit-actions #save-exit-draft {
    grid-column: auto;
  }
}

/* The drawing summary has three clear levels; the action keeps a fixed height. */
.editor-dialog .editor-actions {
  align-items: center;
}
.editor-dialog .editor-actions .studio-price {
  gap: 4px;
}
.editor-dialog .editor-actions .studio-price strong {
  line-height: 1.3;
}
.editor-dialog .editor-actions #save-art {
  align-self: center;
  min-height: 44px;
  height: auto;
}
@media (max-width: 760px) {
  .editor-dialog .editor-actions {
    padding-top: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    column-gap: 16px;
  }
  .editor-dialog .editor-actions .studio-price {
    min-width: 0;
  }
  .editor-dialog .editor-actions #save-art {
    padding: 10px 12px;
  }
}

.artwork-name-body #name-review-error:not([hidden]) {
  margin: 0;
  padding: 12px;
  color: #ffb4a8;
  background: #382621;
  border-left: 2px solid #ce9f98;
  font-size: 12px;
  line-height: 1.5;
}

/* Invalid drawings replace the price summary without growing the footer. */
.wall-drawing-dialog .editor-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  min-height: 80px;
}
.wall-drawing-dialog #drawing-limit[hidden] {
  display: none;
}
.wall-drawing-dialog #drawing-limit {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  min-height: 52px;
  text-align: left;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #65503b;
  background: #eab86b0a;
  color: #d6c5b4;
}
.wall-drawing-dialog #drawing-limit > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.wall-drawing-dialog #drawing-limit strong {
  color: #ebc58f;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.wall-drawing-dialog #drawing-limit span {
  font-size: 11px;
  line-height: 1.4;
}
.drawing-limit-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: #ebc58f;
}
.wall-drawing-dialog .editor-actions > .studio-price {
  grid-column: 1;
  grid-row: 1;
}
.wall-drawing-dialog .editor-actions.has-drawing-warning > .studio-price {
  display: none;
}
.wall-drawing-dialog .editor-actions > .studio-buttons {
  grid-column: 2;
  grid-row: 1;
}
.wall-drawing-dialog .editor-actions .studio-buttons #save-art {
  grid-column: 2;
  grid-row: 1;
}

/* Reservation panels: one heading, one amount, one primary next step. */
#inspector[data-context="selection"] .selection-heading,
#inspector[data-context="reserve"] .selection-heading {
  margin-top: 0;
  padding-right: 28px;
}
#inspector .selection-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 11px;
}
#inspector .selection-status::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--lime);
}
#inspector .selection-status.unavailable {
  color: #ffb4a8;
}
#inspector .selection-status.unavailable::before {
  background: currentColor;
}
#inspector .selection-heading h2 {
  font-size: 22px;
  letter-spacing: -0.5px;
}
#inspector .selection-facts {
  margin-top: 16px;
  padding: 12px 0;
  border-bottom: 0;
  gap: 16px;
}
#inspector .inspector-actions {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  box-shadow: none;
  background: transparent;
}
#inspector .selection-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  padding: 0;
}
#inspector .selection-summary > :is(.metric-label, .metric-value, .metric-estimate, .metric-note) {
  grid-column: 1;
  grid-row: auto;
  text-align: left;
}
#inspector .selection-summary .metric-label {
  font-size: 11px;
}
#inspector .selection-summary .metric-value {
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.6px;
}
#inspector .selection-summary .metric-estimate {
  font-size: 11px;
}
#inspector .selection-summary .metric-note {
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.5;
}
#inspector .payment-available-note {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}
#inspector .inspector-secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
#inspector .inspector-secondary .text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  border: 1px solid var(--line);
}
#inspector .inspector-secondary .text-button:hover {
  background: var(--raised);
}
#inspector .inspector-secondary .draft-discard {
  color: #ce9f98;
}
#inspector .position-details {
  margin-block: 8px 0;
}
#inspector #back-create {
  margin-top: 8px;
}

/* A selected spot reads as one compact decision, not a stack of equal-weight rows. */
#inspector[data-context="selection"] .selection-status {
  margin-bottom: 7px;
}
#inspector[data-context="selection"] .selection-heading h2 {
  margin-bottom: 4px;
}
#inspector[data-context="selection"] .selection-facts {
  margin-top: 12px;
  padding: 10px 12px;
  gap: 12px;
  border: 1px solid #30382d;
  background: #111610;
}
#inspector[data-context="selection"] .selection-facts dd {
  margin-top: 2px;
}
#inspector[data-context="selection"] .inspector-actions {
  margin-top: 12px;
  padding-top: 0;
  gap: 10px;
  border-top: 0;
}
#inspector[data-context="selection"] .selection-summary {
  padding: 12px 14px;
  gap: 3px;
  border: 1px solid #394433;
  background: #121811;
}
#inspector[data-context="selection"] .selection-summary .metric-value {
  font-size: 24px;
}
#inspector[data-context="selection"] .selection-summary .metric-note {
  margin-top: 4px;
}

/* Keep draft artwork, placement, cost and actions in one clear vertical flow. */
#inspector[data-context="draft"] .draft-preview {
  margin-bottom: 14px;
}
#inspector[data-context="draft"] .selection-heading h2 {
  margin-bottom: 5px;
}
#inspector[data-context="draft"] .selection-facts {
  margin-top: 14px;
  padding: 11px 0 0;
  border-bottom: 0;
}
#inspector[data-context="draft"] .selection-facts dd {
  margin-top: 2px;
}
#inspector[data-context="draft"] .inspector-actions {
  gap: 10px;
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
}
#inspector[data-context="draft"] .selection-summary {
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid #394433;
  background: #121811;
}
#inspector[data-context="draft"] .selection-summary .metric-value {
  font-size: 24px;
}
#inspector[data-context="draft"] #reserve-button {
  min-height: 46px;
  margin: 0;
}
@media (max-width: 380px) {
  #inspector[data-context="draft"] {
    padding-top: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  #inspector[data-context="draft"] .inspector-actions {
    gap: 8px;
    margin-top: 10px;
  }
  #inspector[data-context="draft"] .selection-summary {
    padding: 10px 12px;
  }
}

/* Shared dialog rhythm. Links and buttons have the same action geometry. */
#modal {
  --dialog-gutter: 28px;
}
#modal:not(.editor-dialog) .modal-header {
  padding: 14px var(--dialog-gutter);
}
#modal:not(.editor-dialog) .modal-body {
  padding: 22px var(--dialog-gutter);
}
#modal.has-modal-footer #modal-content > .modal-actions {
  padding: 16px var(--dialog-gutter);
}
#modal .modal-body > p:not([class]) {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.modal-actions > :is(button, a) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 112px;
  min-height: 44px;
  text-align: center;
  line-height: 1.4;
  text-decoration: none;
}
.artwork-primary-actions {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}
@media (max-width: 760px) {
  #modal {
    --dialog-gutter: 20px;
  }
  #modal:not(.editor-dialog) .modal-header {
    padding-block: 10px;
  }
  #modal:not(.editor-dialog) .modal-body {
    padding-block: 18px;
  }
  #modal.has-modal-footer #modal-content > .modal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  #modal.has-modal-footer #modal-content > .modal-actions > :only-child {
    grid-column: 1 / -1;
  }
  .modal-actions > :is(button, a) {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 12px;
    font-size: 12px;
    overflow-wrap: anywhere;
  }
  #inspector .selection-summary .metric-value {
    font-size: 24px;
  }
  #inspector .selection-heading p {
    font-size: 12px;
    line-height: 1.5;
  }
}
@media (max-width: 380px) {
  #modal {
    --dialog-gutter: 16px;
  }
  .replacement-actions {
    flex-direction: column;
  }
  .replacement-actions button {
    white-space: normal;
  }
}

@media (max-width: 760px) and (max-height: 620px) {
  .wall-drawing-dialog .editor-actions {
    padding-block: 8px;
    gap: 8px 16px;
  }
  .wall-drawing-dialog #drawing-limit {
    padding: 8px 10px;
    min-height: 52px;
  }
}

/* Confirmation: exact backing, payment choice, then recoverability. */
.reservation-dialog .transaction-summary {
  margin: 0 0 20px;
}
.reservation-dialog .reservation-total > strong {
  font-size: 26px;
  margin: 7px 0;
}
.reservation-dialog .reservation-total > p {
  font-size: 12px;
  line-height: 1.5;
}
.reservation-dialog .payment-panel {
  margin: 0;
  padding-top: 18px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
}
.reservation-dialog .payment-heading {
  padding: 0;
  min-height: 0;
  margin-bottom: 12px;
  border: 0;
}
.reservation-dialog .payment-methods {
  padding: 0;
  margin-bottom: 16px;
}
.reservation-dialog .payment-methods > button {
  min-height: 58px;
  padding: 10px 12px;
}
.reservation-dialog .payment-quote {
  margin: 0;
  padding: 0;
  border: 0;
}
.reservation-dialog .payment-quote .checkout-pay {
  display: block;
  padding: 0 0 12px;
}
.reservation-dialog .checkout-pay > span {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
}
.reservation-dialog .checkout-pay > strong {
  display: block;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.5px;
}
.reservation-dialog .payment-quote .checkout-fees {
  margin-top: 6px;
  padding-top: 12px;
  gap: 9px;
}
.reservation-dialog .payment-quote .checkout-explanation {
  margin: 10px 0 0;
}
.reservation-dialog .reservation-return {
  margin-top: 18px;
  padding: 13px 14px;
  border: 1px solid #3c4935;
  border-left: 2px solid var(--lime);
  background: #111710;
}
.reservation-dialog .reservation-return > strong {
  display: block;
  color: var(--text);
}
.reservation-dialog .reservation-return > p {
  margin-top: 5px;
  font-size: 12px;
}
.reservation-dialog .environment-note {
  margin-bottom: 0;
}
@media (max-width: 760px) {
  .reservation-dialog .reservation-total > strong {
    font-size: 24px;
  }
  .reservation-dialog .checkout-pay > strong {
    font-size: 26px;
  }
}

/* Keep carousel navigation on one row after the shared mobile footer rules. */
#modal.how-dialog .modal-body {
  padding-bottom: 12px;
}

/* Empty My creations stays a compact invitation below the account summary. */
body[data-page="mine"] {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
body[data-page="mine"] main {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
}
body[data-page="mine"] main > footer {
  margin-top: auto;
}

/* Legal routes use the shared shell but keep the reading column calm and compact. */
body[data-page="terms"],
body[data-page="privacy"] {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
}
body[data-page="terms"] main,
body[data-page="privacy"] main {
  display: flex;
  width: 100%;
  flex: 1;
  flex-direction: column;
}
.legal-view {
  width: min(820px, 100%);
  margin: 0 auto;
}
.legal-page {
  border: 1px solid var(--line);
  background: #151815;
}
.legal-updated,
.legal-intro,
.legal-page > section {
  margin: 0;
  padding-inline: clamp(22px, 5vw, 56px);
}
.legal-updated {
  padding-top: clamp(24px, 5vw, 46px);
  color: #7f8878;
  font:
    500 11px/1.4 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.legal-intro {
  max-width: 730px;
  padding-top: 18px;
  padding-bottom: 30px;
  color: #cdd2c7;
  font:
    500 clamp(17px, 2.2vw, 20px) / 1.55 "Space Grotesk",
    sans-serif;
}
.legal-page > section {
  padding-top: 24px;
  padding-bottom: 25px;
  border-top: 1px solid #292e27;
}
.legal-page h2 {
  margin: 0 0 10px;
  color: var(--text);
  font:
    600 15px/1.35 "Space Grotesk",
    sans-serif;
}
.legal-page p {
  max-width: 700px;
  margin: 0;
  color: #a5ada0;
  font-size: 14px;
  line-height: 1.75;
}
.legal-page a {
  color: var(--lime);
  text-decoration: underline;
  text-decoration-color: #c1f77b66;
  text-underline-offset: 3px;
}

/* The footer stays quiet, but gives the product a clear identity and a few useful exits. */
.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
  padding: 22px 0 26px;
  border-top: 1px solid var(--line);
}
.footer-identity,
.footer-nav,
.footer-link,
.footer-status {
  display: flex;
  align-items: center;
}
.footer-identity {
  min-width: 0;
  gap: 14px;
}
.footer-tagline {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.footer-nav {
  gap: 2px;
}
.footer-link,
.footer-status {
  min-height: 38px;
  border: 1px solid transparent;
  color: #a8b09e;
  background: transparent;
  font:
    600 12px/1 "DM Sans",
    sans-serif;
  text-decoration: none;
  white-space: nowrap;
}
.footer-link {
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
}
.footer-link:hover,
.footer-link:focus-visible {
  border-color: #405032;
  color: var(--lime);
  background: #1b2118;
}
.footer-link-x > span:first-child {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid #435137;
  color: var(--text);
  font-size: 10px;
}
.footer-status {
  justify-content: flex-end;
  gap: 8px;
  padding: 0 0 0 18px;
  border-left-color: var(--line);
  color: var(--muted);
  text-align: right;
}
.footer-status::before,
.about-environment .status-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  background: var(--lime);
  box-shadow: 0 0 9px #b7ff6a80;
  content: "";
}
.footer-status:hover,
.footer-status:focus-visible {
  color: var(--text);
}
.footer-legal-bar {
  grid-column: 1 / -1;
  justify-self: center;
  display: flex;
  width: max-content;
  max-width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 6px 8px 6px 15px;
  border: 1px solid #2d332b;
  border-radius: 8px;
  background: #141714;
  color: #afb6a8;
  font:
    500 11px/1.35 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.01em;
}
.footer-legal-bar > span[aria-hidden="true"] {
  color: #5f675b;
}
.footer-legal-bar a {
  color: #c4c9be;
  text-decoration: none;
}
.footer-legal-bar a:hover,
.footer-legal-bar a:focus-visible,
.footer-legal-bar a.active {
  color: var(--lime);
}
#copy-contact-email {
  display: grid;
  width: 28px;
  height: 28px;
  margin-left: 2px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #c4c9be;
}
#copy-contact-email svg {
  stroke: currentColor;
  stroke-width: 1.6;
}
#copy-contact-email:hover,
#copy-contact-email:focus-visible {
  border-color: #41493d;
  color: var(--lime);
  background: #1c211a;
}

#modal.about-dialog {
  width: min(740px, calc(100vw - 32px));
}
.about-dialog .about-body {
  padding: 26px 28px 28px;
}
.about-lede {
  max-width: 590px;
  margin: 0;
  color: var(--text);
  font:
    500 18px/1.55 "Space Grotesk",
    sans-serif;
  letter-spacing: -0.2px;
}
.about-story {
  margin-top: 20px;
  padding: 18px 20px;
  border-left: 2px solid var(--lime);
  background: #1a2017;
}
.about-story > span {
  display: block;
  margin-bottom: 7px;
  color: var(--lime);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
}
.about-story h3 {
  margin: 0;
  color: var(--text);
  font:
    600 19px/1.3 "Space Grotesk",
    sans-serif;
  letter-spacing: -0.3px;
}
.about-story p {
  margin: 7px 0 0;
  color: #aeb6a5;
  font-size: 13px;
  line-height: 1.55;
}
.about-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 24px;
  border: 1px solid var(--line);
  background: #141713;
}
.about-fact {
  min-width: 0;
  padding: 18px;
}
.about-fact + .about-fact {
  border-left: 1px solid var(--line);
}
.about-fact > span,
.about-environment strong {
  display: block;
  margin-bottom: 8px;
  color: var(--lime);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
}
.about-fact > strong {
  display: block;
  color: var(--text);
  font:
    600 15px/1.35 "Space Grotesk",
    sans-serif;
}
.about-fact p,
.about-environment p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.about-environment {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding: 15px 17px;
  border: 1px solid #3e502d;
  background: #1b2417;
}
.about-environment .status-dot {
  margin-top: 4px;
}
.about-environment strong {
  margin-bottom: 0;
}
.about-environment p {
  margin-top: 4px;
}
.about-independent {
  margin: 16px 0 0;
  color: #838c7b;
  font-size: 11px;
  line-height: 1.55;
}
.about-independent strong {
  color: #aeb6a5;
  font-weight: 600;
}

@media (max-width: 760px) {
  .site-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    margin-top: 22px;
    padding: 18px 0 max(22px, env(safe-area-inset-bottom));
  }
  .footer-tagline {
    display: none;
  }
  .footer-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .footer-link {
    min-width: 0;
    padding-inline: 7px;
  }
  .footer-link-x {
    gap: 4px;
  }
  .footer-link-x > span:first-child {
    display: none;
  }
  .footer-status {
    max-width: 170px;
    padding-left: 12px;
    border-left: 0;
    font-size: 11px;
    white-space: normal;
  }
  .footer-legal-bar {
    width: 100%;
    flex-wrap: wrap;
    gap: 7px 9px;
    padding: 10px 12px;
    text-align: center;
  }
  .footer-legal-bar > span:first-child {
    flex-basis: 100%;
  }
  .footer-legal-bar > span:first-child + span {
    display: none;
  }
  .legal-page {
    border-inline: 0;
  }
  .about-dialog .about-body {
    padding: 20px 16px 22px;
  }
  .about-lede {
    font-size: 16px;
  }
  .about-story {
    margin-top: 16px;
    padding: 15px 16px;
  }
  .about-story h3 {
    font-size: 17px;
  }
  .about-story p {
    font-size: 12px;
  }
  .about-facts {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 20px;
  }
  .about-fact {
    padding: 14px 16px;
  }
  .about-fact + .about-fact {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .about-fact p {
    margin-top: 4px;
  }
  .about-environment {
    margin-top: 14px;
  }
}
body[data-page="mine"] #gallery:has(.empty-state) {
  min-height: 0;
}
body[data-page="mine"] #gallery .empty-state:has(.empty-actions) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 24px;
  width: 100%;
  padding: 22px 24px;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--panel);
}
body[data-page="mine"] #gallery .empty-state .big-number {
  display: none;
}
body[data-page="mine"] #gallery .empty-state:has(.empty-actions) h2 {
  grid-column: 1;
  margin: 0;
  font-size: 20px;
}
body[data-page="mine"] #gallery .empty-state:has(.empty-actions) p {
  grid-column: 1;
  margin: 0;
}
body[data-page="mine"] #gallery .empty-state .empty-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
}
@media (max-width: 600px) {
  body[data-page="mine"] #gallery .empty-state:has(.empty-actions) {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px;
  }
  body[data-page="mine"] #gallery .empty-state .empty-actions {
    grid-column: 1;
    grid-row: 3;
    margin-top: 12px;
  }
}
@media (max-width: 760px) {
  body[data-page="wall"]:has(#inspector:not([data-context="idle"])) main > footer {
    visibility: hidden;
  }
}
@media (max-width: 760px) {
  #modal.how-dialog.has-modal-footer #modal-content > .how-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    justify-content: stretch;
    gap: 10px;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  }
  #modal.how-dialog .how-controls > button {
    min-height: 44px;
    padding-inline: 8px;
  }
}

/* RM-024: the frame a map drawing will own, drawn in canvas percentages so it follows zoom. */
.wall-drawing-dialog #frame-outline {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  box-sizing: border-box;
  outline: 1px dashed #c1f77bcc;
  outline-offset: 0;
  background: #c1f77b0a;
}
.wall-drawing-dialog #frame-outline[hidden] {
  display: none;
}
.wall-drawing-dialog #frame-outline.is-invalid {
  outline-color: #ff8078;
  background: #ff80780f;
}
.reservation-dialog .reservation-frame-note {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #a3aa99;
}

/* RM-024: earning status pill and edit cooldown line for owned creations. */
.earning-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: 2px 0 0;
  padding: 2px 9px;
  border: 1px solid #4d7756;
  border-radius: 999px;
  background: #c1f77b14;
  color: #c1f77b;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.5;
  white-space: nowrap;
}
.earning-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.earning-pill.pending {
  border-color: #65503b;
  background: #eab86b0f;
  color: #ebc58f;
}
.earning-pill[hidden] {
  display: none;
}
.gallery .art-card .earning-pill {
  margin: 4px 0 2px;
}
.artwork-info .artwork-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.artwork-info .artwork-status .earning-pill {
  margin: 0;
}

/* The center gift is a testnet promotion preview, opened from its real map creation. */
dialog.giveaway-dialog {
  width: min(600px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  border-color: #60784b;
  background: #1c2119;
}
.giveaway-dialog .giveaway-body {
  padding-top: 18px !important;
}
.giveaway-hero {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
}
.giveaway-art {
  aspect-ratio: 1;
  padding: 5px;
  border: 1px solid #a9e75e;
  background: #243025;
}
.giveaway-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.giveaway-eyebrow {
  color: #bfff7b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
}
.giveaway-hero h3 {
  margin: 7px 0 7px;
  color: #f6f7ef;
  font:
    600 clamp(29px, 5vw, 38px) / 1.05 "Space Grotesk",
    sans-serif;
  letter-spacing: -1.3px;
}
.giveaway-prize {
  margin-top: 18px;
  padding: 18px 20px 17px;
  border: 1px solid #67884e;
  background: #25331e;
}
.giveaway-prize > strong {
  display: block;
  margin: 5px 0 3px;
  color: #f6f7ef;
  font:
    600 19px / 1.2 "Space Grotesk",
    sans-serif;
}
.giveaway-prize p {
  margin: 0;
  color: #c7d3bf;
  font-size: 13px;
}
.giveaway-estimate {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #546647;
}
.giveaway-estimate strong {
  color: #caff98;
  font:
    600 35px / 1 "Space Grotesk",
    sans-serif;
  letter-spacing: -1.2px;
  white-space: nowrap;
}
.giveaway-estimate span {
  color: #d2dcca;
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
}
.giveaway-dialog .giveaway-delivery {
  margin: 10px 1px 0;
  color: #c7d3bf;
  font-size: 12px;
  line-height: 1.45;
}
.giveaway-delivery strong {
  color: #caff98;
  font-weight: 600;
}
.giveaway-instructions {
  margin-top: 19px;
}
.giveaway-instructions > .giveaway-eyebrow {
  display: block;
  margin-bottom: 9px;
}
.giveaway-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  min-height: 55px;
  border-top: 1px solid #3d4938;
  color: #f0f4e9;
  text-decoration: none;
}
.giveaway-step:last-of-type {
  border-bottom: 1px solid #3d4938;
}
.giveaway-step-number {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid #8bb963;
  color: #caff98;
  font-size: 12px;
  font-weight: 700;
}
.giveaway-step strong {
  font-size: 14px;
  font-weight: 600;
}
.giveaway-step > span:last-child {
  color: #caff98;
  font-size: 16px;
}
.giveaway-step:hover strong {
  color: #caff98;
}
.giveaway-step.is-upcoming {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  color: var(--muted);
  cursor: default;
}
.giveaway-step.is-upcoming > span:last-child {
  color: #8f9b87;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
}
.giveaway-step.is-upcoming:hover strong {
  color: inherit;
}
.giveaway-note {
  margin: 15px 0 0;
  color: #aeb9a7;
  font-size: 11px;
  line-height: 1.5;
}
@media (max-width: 540px) {
  .giveaway-hero {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 13px;
  }
  .giveaway-art {
    padding: 3px;
  }
  .giveaway-hero h3 {
    font-size: 27px;
  }
  .giveaway-prize {
    margin-top: 18px;
    padding: 15px;
  }
  .giveaway-prize > strong {
    font-size: 16px;
  }
  .giveaway-estimate {
    align-items: start;
    flex-direction: column;
    gap: 5px;
  }
  .giveaway-estimate strong {
    font-size: 30px;
  }
  .giveaway-estimate span {
    text-align: left;
  }
  .giveaway-instructions {
    margin-top: 17px;
  }
  .giveaway-step {
    gap: 8px;
  }
  .giveaway-step strong {
    font-size: 12px;
  }
}

/* Keep the close control the same distance from the top and right edges. */
#modal:not(.editor-dialog) .modal-header,
#modal.editor-dialog .modal-header,
.editor-exit .modal-header {
  padding-inline-end: 14px;
}
@media (max-width: 760px) {
  #modal:not(.editor-dialog) .modal-header,
  #modal.editor-dialog .modal-header,
  .editor-exit .modal-header {
    padding-inline-end: 10px;
  }
}
.update-cooldown {
  display: block;
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #a3aa99;
  text-align: center;
}
.update-cooldown[hidden] {
  display: none;
}

.creation-profile-fields,
.creation-profile-form {
  display: grid;
  gap: 14px;
}
.creation-profile-fields textarea,
.creation-profile-form textarea {
  width: 100%;
  min-width: 0;
  resize: vertical;
  border: 1px solid #46503b;
  border-radius: 6px;
  background: #10160d;
  color: var(--text);
  padding: 10px;
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
}
.creation-profile-fields textarea:focus,
.creation-profile-form textarea:focus {
  border-color: var(--lime);
}
.creation-profile-fields .field span,
.creation-profile-form .field span {
  color: var(--muted);
}
.creation-profile-fields .field-heading,
.creation-profile-form .field-heading {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.x-handle-field {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  border: 1px solid #46503b;
  border-radius: 8px;
  background: #10160d;
}
.x-handle-field:focus-within {
  border-color: var(--lime);
  box-shadow: 0 0 0 1px var(--lime);
}
.x-handle-field > span {
  padding-left: 12px;
  color: var(--text) !important;
  font-size: 16px;
}
.x-handle-field input {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: 0 !important;
  background: transparent;
  padding-left: 2px !important;
  font-size: 16px;
}
.x-handle-field input:focus-visible {
  outline: none;
}
.creation-profile-form {
  padding: 20px 24px;
}
.creation-profile-form .modal-actions {
  margin: 4px -24px -20px;
}
.creation-description {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.artwork-heading .creation-description {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text);
}
.artwork-info > .creation-description {
  margin: 16px 0 0;
  color: var(--text);
}
.creation-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 12px;
}
.creation-links a {
  color: var(--lime);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.art-card .card-description {
  display: block;
  margin-top: 6px;
  color: var(--text);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .creation-profile-form {
    padding: 16px;
  }
  .creation-profile-form .modal-actions {
    margin: 4px -16px -16px;
  }
}

/* Creation details: identity and location lead; wallet backing explains ongoing ownership. */
dialog.artwork-dialog {
  width: 820px;
}
.artwork-dialog .artwork-layout {
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1fr);
  column-gap: 24px;
  row-gap: 0;
  padding: 22px 26px 16px;
}
.artwork-dialog .artwork-visual {
  border-radius: 0;
  min-height: 0;
  aspect-ratio: 1;
  align-self: start;
}
.artwork-dialog .artwork-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}
.artwork-dialog .artwork-size-inline {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.artwork-dialog .artwork-story .creator-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 13px;
}
.artwork-dialog .artwork-story .creator-line span {
  color: var(--muted);
  font-size: 12px;
}
.artwork-dialog .artwork-story .creator-line strong {
  font-size: 13px;
}
.artwork-dialog .artwork-story > .creation-description {
  margin: 13px 0 0;
  font-size: 14px;
  line-height: 1.45;
}
.artwork-dialog .artwork-info .artwork-metrics {
  display: block;
  margin: 22px 0 0;
  padding-top: 0;
  border-top: 0;
  border-bottom: 0;
  background: none;
}
.artwork-dialog .artwork-stat-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  background: #20271c;
}
.artwork-dialog .artwork-stat-pair > :only-child {
  grid-column: 1 / -1;
}
.artwork-dialog .artwork-stat-pair > :nth-child(2) {
  border-top: 1px solid var(--line);
}
.artwork-dialog .artwork-stat-pair > .value-panel,
.artwork-dialog .artwork-stat-pair > .artwork-earned {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 13px 15px;
  border-bottom: 0;
  background: none;
}
.artwork-dialog .artwork-metric-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  line-height: 1.3;
}
.artwork-dialog .artwork-stat-pair > :is(.value-panel, .artwork-earned) > strong {
  display: block;
  margin: 0;
  font-size: clamp(18px, 2.1vw, 23px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  white-space: nowrap;
  overflow-wrap: anywhere;
}
.artwork-dialog .artwork-keep-line {
  margin: 15px 0 0;
  color: #d4ddcb;
  font-size: 12px;
  line-height: 1.45;
}
.artwork-dialog .artwork-keep-line strong {
  color: var(--text);
  white-space: nowrap;
}
.artwork-dialog .artwork-simulation-note {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.artwork-dialog .artwork-info-tip {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  letter-spacing: normal;
  text-transform: none;
}
.artwork-dialog .artwork-info-tip > summary {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 1px solid #596650;
  color: var(--muted);
  cursor: pointer;
  font: 700 11px / 1 sans-serif;
  list-style: none;
}
.artwork-dialog .artwork-info-tip > summary::-webkit-details-marker {
  display: none;
}
.artwork-dialog .artwork-info-tip[open] > summary,
.artwork-dialog .artwork-info-tip > summary:hover {
  border-color: var(--lime);
  color: var(--lime);
}
.artwork-dialog .artwork-info-tip > p {
  position: absolute;
  z-index: 20;
  right: 0;
  bottom: calc(100% + 9px);
  width: min(250px, calc(100vw - 48px));
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #60734d;
  background: #252e20;
  box-shadow: 0 12px 28px #0008;
  color: var(--text);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
}
.artwork-dialog .value-panel .artwork-info-tip > p {
  right: auto;
  left: -95px;
}
.artwork-dialog .artwork-info .artwork-primary-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 16px;
  padding: 0;
}
.artwork-dialog .artwork-primary-actions > .primary {
  min-width: 122px;
  min-height: 42px;
}
.artwork-dialog .artwork-primary-actions > .text-button {
  min-height: 42px;
  padding-inline: 0;
  color: var(--muted);
}
.artwork-dialog .artwork-primary-actions > .update-cooldown {
  flex-basis: 100%;
}
.artwork-dialog .artwork-info .artwork-primary-actions:empty {
  display: none;
}
.artwork-dialog .artwork-archive-note {
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.artwork-dialog .artwork-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 18px;
  min-width: 0;
  margin-top: 16px;
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}
.artwork-dialog .artwork-details .receipt {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.artwork-dialog .artwork-details .receipt > div {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
}
.artwork-dialog .artwork-details .receipt > div + div {
  border: 0;
}
.artwork-dialog .artwork-details .receipt span {
  font-size: 10px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.artwork-dialog .artwork-details .receipt strong {
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.artwork-dialog .artwork-actions {
  display: flex;
  align-items: center;
  margin: 0 0 0 auto;
  padding: 0;
}
.artwork-dialog .artwork-actions .artwork-file-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
}
.artwork-dialog .artwork-actions .artwork-file-actions button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 2px;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border: 0;
  background: transparent;
}
.artwork-dialog .artwork-actions .artwork-file-actions button:last-child {
  justify-content: center;
}
.artwork-dialog .artwork-footer-action {
  color: #b8c2b1;
}
.artwork-dialog .artwork-footer-action:hover:not(:disabled) {
  background: transparent;
  color: var(--lime);
}
.artwork-dialog .artwork-footer-action svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}
.artwork-dialog .artwork-footer-action .artwork-action-label {
  margin: 0;
  color: inherit;
}
.artwork-dialog .artwork-owner-footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.artwork-dialog .artwork-owner-footer .release-action {
  min-width: 154px;
  min-height: 42px;
  justify-content: center;
}
.artwork-dialog .artwork-local-note {
  grid-column: 1 / -1;
  margin: 0 !important;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
@media (max-width: 760px) {
  .artwork-dialog .artwork-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 18px;
  }
  .artwork-dialog .artwork-visual {
    aspect-ratio: auto;
    margin-bottom: 18px;
  }
  .artwork-dialog .artwork-info {
    display: block;
  }
  .artwork-dialog .artwork-footer {
    align-items: stretch;
  }
  .artwork-dialog .artwork-details,
  .artwork-dialog .artwork-actions {
    width: 100%;
  }
  .artwork-dialog .artwork-actions .artwork-file-actions {
    justify-content: flex-start;
  }
  .artwork-dialog .artwork-details .receipt {
    gap: 6px 18px;
  }
}
@media (max-width: 540px) {
  .artwork-dialog .artwork-earned .artwork-info-tip > p {
    right: -28px;
  }
  .artwork-dialog .artwork-owner-footer .release-action {
    width: 100%;
  }
  .artwork-dialog .artwork-actions .artwork-file-actions button {
    min-height: 40px;
  }
  .artwork-dialog .artwork-actions .artwork-file-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .artwork-dialog .artwork-actions .artwork-file-actions button {
    width: 100%;
  }
  .artwork-dialog #view-artwork-wall {
    grid-column: 1 / -1;
  }
  .artwork-dialog #copy-artwork-link:last-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 360px) {
  .artwork-dialog .artwork-stat-pair > .value-panel,
  .artwork-dialog .artwork-stat-pair > .artwork-earned {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
  .artwork-dialog .artwork-stat-pair > :is(.value-panel, .artwork-earned) > strong {
    white-space: normal;
  }
}

/* Mobile finishing: keep the artwork and the decision in view on short screens. */
@media (max-width: 760px) {
  dialog:not(.editor-dialog) {
    max-height: calc(100dvh - 24px);
  }

  #modal:not(.editor-dialog) .modal-header {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 12px 12px 12px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
  }

  #modal:not(.editor-dialog) .modal-body {
    padding: 18px;
  }

  body[data-runtime="testnet"] .simulation-banner,
  body[data-runtime="prelaunch"] .simulation-banner {
    font-size: 12px;
  }

  .simulation-banner strong,
  .activity-metrics span,
  .activity-live > b,
  .wall-activity-heading small {
    font-size: 11px;
  }

  .activity-metrics p,
  .activity-growth-foot {
    font-size: 13px;
  }

  .artwork-dialog .artwork-layout {
    padding: 14px 18px 18px;
  }

  .artwork-dialog .artwork-visual {
    height: clamp(160px, 52vw, 228px);
    aspect-ratio: auto;
    margin-bottom: 14px;
  }

  .artwork-dialog .artwork-visual canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .artwork-dialog .artwork-story .creator-line {
    margin-top: 9px;
  }

  .artwork-dialog .artwork-story > .creation-description {
    margin-top: 9px;
  }

  .artwork-dialog .artwork-info .artwork-metrics {
    margin-top: 14px;
  }

  .artwork-dialog .artwork-stat-pair > .value-panel,
  .artwork-dialog .artwork-stat-pair > .artwork-earned {
    padding: 11px 13px;
  }

  .artwork-dialog .artwork-metric-label,
  .artwork-dialog .artwork-details .receipt span {
    font-size: 11px;
  }

  .artwork-dialog .artwork-keep-line {
    margin-top: 12px;
    font-size: 13px;
  }

  .artwork-dialog .artwork-simulation-note {
    font-size: 12px;
  }

  #modal.giveaway-dialog .modal-header {
    background: #1c2119;
  }

  .giveaway-dialog .giveaway-body {
    padding-top: 14px !important;
  }

  .giveaway-prize {
    margin-top: 14px;
    padding: 13px 15px;
  }

  .giveaway-estimate {
    align-items: center;
    flex-direction: row;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
  }

  .giveaway-estimate span {
    text-align: right;
  }

  .giveaway-dialog .giveaway-delivery {
    margin-top: 12px;
    font-size: 13px;
  }

  .giveaway-instructions {
    margin-top: 14px;
  }

  .giveaway-step {
    min-height: 50px;
  }

  .giveaway-step strong {
    font-size: 13px;
  }

  .giveaway-note {
    font-size: 12px;
  }
}

/* Saving ends with one clear outcome and two direct next steps. */
.draft-saved-dialog {
  width: min(500px, calc(100vw - 24px));
}
.draft-saved-summary {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid #536a3f;
  background: #1b2518;
}
.draft-saved-summary > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #14200e;
  background: var(--lime);
  font-weight: 800;
}
.draft-saved-summary strong {
  display: block;
  font:
    700 15px/1.3 "Space Grotesk",
    sans-serif;
}
.draft-saved-summary p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.draft-saved-dialog .modal-intro {
  margin: 16px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

/* Prelaunch home stays compact enough to keep the map in the first mobile view. */
@media (max-width: 760px) {
  body[data-site="prelaunch"][data-page="wall"] main {
    padding-top: 16px;
  }
  body[data-site="prelaunch"][data-page="wall"] .simulation-banner {
    margin-bottom: 14px;
    padding: 9px 12px;
  }
  body[data-site="prelaunch"][data-page="wall"] .page-heading {
    margin-bottom: 16px;
  }
  body[data-site="prelaunch"][data-page="wall"] .page-heading h1 {
    margin: 0 0 7px;
  }
  body[data-site="prelaunch"][data-page="wall"] .page-heading p {
    margin: 0;
  }
  .draft-saved-dialog .modal-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .gallery .art-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-height: 136px;
    padding: 10px;
  }

  .gallery .art-thumb {
    width: 96px;
    height: 96px;
    margin: 0;
  }

  .gallery .art-card .art-meta {
    min-height: 114px;
    padding: 0;
  }

  .gallery .art-card .card-description {
    display: -webkit-box;
    margin-top: 5px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .gallery .art-card .card-value {
    margin-top: auto;
    padding-top: 7px;
    font-size: 14px !important;
  }

  .gallery .art-card .card-value > span {
    font-size: 11px;
  }

  .gallery .art-card .card-rewards {
    margin-top: 4px;
    font-size: 11px;
  }
}

/* Keep destructive controls visually consistent after component-specific styles. */
button.secondary.danger,
button.release-action,
button.local-draft-delete {
  color: #e5aaa2;
  border-color: #70443f;
  background: transparent;
}
button.secondary.danger:hover:not(:disabled),
button.release-action:hover:not(:disabled),
button.local-draft-delete:hover:not(:disabled) {
  color: #ffc0b8;
  border-color: #9a5a51;
  background: #321d1a;
  filter: none;
}
button.draft-discard {
  color: #e5aaa2;
}
button.draft-discard:hover:not(:disabled) {
  color: #ffc0b8;
  border-color: #70443f;
  background: #321d1a;
}