/* ==========================================================================
   THE GENESYS - reserved area: rail + orders
   Design: "Nuova proposta grafica.dc.html" -> data-screen-label="Web - Ordini"
   (Turn 6a)

   Scoped under .gns-reserved, which the child theme's templates/orders.php
   emits. The rail (template-parts/reserved-nav.php) is written to be reused by
   the other reserved-area screens as they are redesigned; only orders loads
   this stylesheet today.
   ========================================================================== */

body.gns-reserved-page {
  background-color: var(--gns-bg);
  color: var(--gns-text);
}

/*
 * ⚠️ The site header is `position: fixed`, so this layout has to clear it
 * itself - the parent's own offset belongs to a container this template
 * replaces. With `padding-top: 0` the stat tiles rendered UNDERNEATH the
 * header and were sliced in half.
 *
 * --gns-header-h is measured at runtime by theme-switch.js (the theme's
 * --top-margin claims 113px; the header actually renders 122px, more with the
 * beta banner). The nested fallback keeps this sane if the script never runs.
 */
.gns-reserved {
  display: grid;
  grid-template-columns: 250px 1fr;
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--gns-header-h, var(--top-margin, 113px)) + 16px) 20px 64px;
  font-family: var(--gns-font);
  color: var(--gns-text);
}

/* ---------------------------------------------------------------- rail --- */
/*
 * The rail's own appearance now lives in reserved-rail.css, scoped to
 * `.gns-rail`, because the same markup is rendered on the twelve restyled
 * sub-pages too. Only its PLACEMENT in this screen's grid stays here.
 */
.gns-reserved .gns-rail {
  position: sticky;
  top: calc(var(--gns-header-h, var(--top-margin, 113px)) + 16px);
}

/* ---------------------------------------------------------------- main --- */

.gns-reserved__main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 0 24px 28px;
  min-width: 0;
}

.gns-orders__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.gns-reserved .gns-orders__title {
  margin: 0;
  font-family: var(--gns-font);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.03em;
  text-transform: none;
  color: var(--gns-text);
  /* The parent paints some headings as transparent gradient text. */
  background: none !important;
  -webkit-background-clip: border-box !important;
          background-clip: border-box !important;
  -webkit-text-fill-color: var(--gns-text) !important;
}

.gns-orders__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gns-reserved .gns-orders__search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 260px;
  max-width: 100%;
  height: 36px;
  padding: 0 13px;
  border: 1px solid var(--gns-border-strong);
  border-radius: var(--gns-r-pill);
  background: var(--gns-tint-weak);
}
.gns-reserved .gns-orders__search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--gns-text) !important;
  font-family: var(--gns-font);
  font-size: 12.5px;
}
/*
 * The field is borderless inside the search pill, so the focus state belongs
 * on the pill, not on the input - an outline here would sit inside the border
 * that is already drawn. Same treatment as the quantity stepper.
 */
.gns-reserved .gns-orders__search input:focus,
.gns-reserved .gns-orders__search input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.gns-reserved .gns-orders__search:focus-within {
  border-color: var(--gns-focus);
  box-shadow: 0 0 0 3px var(--gns-cyan-tint-2);
}
.gns-reserved .gns-orders__search ::placeholder { color: var(--gns-muted); opacity: 1; }
.gns-reserved .gns-orders__search button {
  padding: 0;
  border: 0;
  background: transparent !important;
  color: var(--gns-secondary) !important;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.gns-reserved .gns-orders__search button:hover { color: var(--gns-cyan-ink) !important; }

.gns-reserved .gns-orders__sort {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.gns-reserved .gns-orders__sort label {
  margin: 0;
  font: 500 10px var(--gns-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gns-muted) !important;
}
.gns-reserved .gns-orders__sort select {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--gns-border-strong) !important;
  border-radius: var(--gns-r-pill);
  background-color: transparent !important;
  color: var(--gns-text) !important;
  font-family: var(--gns-font);
  font-size: 12.5px;
  cursor: pointer;
}
.gns-reserved .gns-orders__sort select option {
  background: var(--gns-surface);
  color: var(--gns-text);
}

.gns-reserved .gns-orders__count {
  margin: 0;
  font: 500 10px var(--gns-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gns-muted) !important;
}

/* --------------------------------------------------------------- table --- */

.gns-orders__table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-card);
  background: var(--gns-surface);
  overflow: hidden;
}

/*
 * ⚠️ Column widths deliberately differ from the artboard's
 * `1fr 150px 160px 130px 130px`, because the COLUMNS differ. The canvas draws
 * product / date / remaining prints / total / action; this table shows
 * product / order / quantity / total / action, because remaining prints needs
 * Right-to-Print data this install does not carry. Track 3 is 110px rather
 * than 160px since it holds a quantity, not "2 di 3 stampe"; track 5 is 150px
 * to fit the action button. Matching the canvas numbers here would size the
 * columns wrong for what is actually in them.
 */
.gns-orders__row {
  display: grid;
  grid-template-columns: 1fr 150px 110px 130px 150px;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--gns-border-faint);
}
.gns-orders__row:last-child { border-bottom: 0; }

.gns-orders__row--head {
  padding: 12px 18px;
  border-bottom: 1px solid var(--gns-border);
  font: 500 9.5px var(--gns-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gns-muted);
}
.gns-orders__end { justify-self: end; text-align: right; }

.gns-orders__product {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.gns-orders__thumb {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 10px;
  object-fit: contain;
  background: var(--gns-elevated);
  border: 1px solid var(--gns-border-faint);
}
.gns-orders__names {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.gns-reserved .gns-orders__name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--gns-text) !important;
  text-decoration: none !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gns-reserved .gns-orders__name:hover { color: var(--gns-cyan-ink) !important; }
.gns-orders__meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--gns-secondary-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gns-orders__order {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}
.gns-orders__date { color: var(--gns-secondary-2); }
.gns-orders__id {
  font-family: var(--gns-font-mono);
  font-size: 11px;
  color: var(--gns-muted);
}

.gns-orders__qty { font-size: 12.5px; color: var(--gns-body); }
.gns-orders__total { font-size: 13px; font-weight: 700; color: var(--gns-text); }

.gns-reserved .gns-orders__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  border: 1px solid var(--gns-border-heavy);
  border-radius: var(--gns-r-pill);
  font-size: 11.5px;
  white-space: nowrap;
  color: var(--gns-body) !important;
  text-decoration: none !important;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.gns-reserved .gns-orders__btn:hover {
  border-color: var(--gns-cyan);
  background: var(--gns-cyan-tint);
  color: var(--gns-text) !important;
}
.gns-reserved .gns-orders__btn--primary {
  height: 44px;
  padding: 0 22px;
  border: 0;
  background: var(--gns-gradient);
  color: var(--gns-on-accent) !important;
  font-size: 13px;
  font-weight: 700;
}

/* ---------------------------------------------------------- pagination --- */

.gns-orders__pages {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.gns-reserved .gns-orders__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--gns-border-strong);
  border-radius: 10px;
  font-size: 13px;
  color: var(--gns-body) !important;
  text-decoration: none !important;
}
.gns-reserved .gns-orders__page:hover {
  border-color: var(--gns-cyan);
  color: var(--gns-text) !important;
}
.gns-reserved .gns-orders__page.is-active {
  background: var(--gns-cyan-tint-2);
  border-color: var(--gns-border-cyan);
  color: var(--gns-text) !important;
  font-weight: 700;
}

/* --------------------------------------------------------------- empty --- */

.gns-orders__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 56px 20px;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-card);
  background: var(--gns-surface);
  text-align: center;
}
.gns-reserved .gns-orders__empty p {
  margin: 0;
  font-size: 14px;
  color: var(--gns-secondary) !important;
}

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

@media (max-width: 1100px) {
  .gns-orders__row {
    grid-template-columns: 1fr 130px 90px 110px;
  }
  /* The action moves under the product rather than squeezing a fifth track. */
  .gns-orders__row--head span:last-child { display: none; }
  .gns-orders__action {
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
  }
}

/* ⚠️ 899, not 900, so this agrees with reserved-pages.css. That file pairs a
   `min-width: 900px` two-column rule with a `max-width: 899px` collapse, and
   the rail is shared markup - a one-pixel disagreement between the two hosts
   would have left the sub-pages' rail a column while its chips were styled as a
   strip. */
@media (max-width: 899px) {
  /*
   * ⚠️ `minmax(0, 1fr)` and the `min-width: 0` below are what make the strip a
   * SCROLLER rather than a blowout. A `1fr` track takes its automatic minimum
   * from its content's min-content width, and a `flex-wrap: nowrap` row of
   * fifteen unshrinkable chips has a min-content width of ~1550px - so the
   * column, and everything else in it, grew to 1550px inside a 440px page and
   * the stat tiles ran off the right edge. Floor the track at 0 and the
   * overflow goes where it was asked to go: inside the strip.
   */
  .gns-reserved {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 48px;
  }
  .gns-reserved > * { min-width: 0; }
  .gns-reserved .gns-rail {
    position: static;
    min-width: 0;
    border-right: 0;
    border-bottom: 1px solid var(--gns-border-faint);
    padding: 16px 0;
  }
  /* One scrolling row. Appearance is in reserved-rail.css; this is the layout
     half, which has to live here because the host sets it. */
  .gns-reserved .gns-rail__list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .gns-reserved__main { padding: 20px 0 0; }

  /* Below the table's narrowest useful width, each row becomes a card. */
  .gns-orders__row {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 8px 12px;
  }
  .gns-orders__row--head { display: none; }
  .gns-orders__product { grid-column: 1 / -1; }
  .gns-orders__order { grid-column: 1; }
  .gns-orders__qty,
  .gns-orders__total { grid-column: 2; justify-self: end; }
  .gns-orders__action { grid-column: 1 / -1; justify-self: start; }
}

/* ========================================================== overview ==== */
/*
 * Panoramica. The canvas's live-print, hub and certificates panels are absent
 * for want of a data source - see the note at the top of
 * templates/reserved-area.php. The stats band is kept but filled with numbers
 * that are true on this install.
 */

/* Stat tiles are a shared component - see components.css. */

.gns-ov__panel {
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-card);
  background: var(--gns-surface);
  overflow: hidden;
}
.gns-ov__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gns-border);
}
.gns-reserved .gns-ov__panel-title {
  margin: 0;
  font: 500 9.5px var(--gns-font-mono) !important;
  letter-spacing: .12em;
  text-transform: uppercase !important;
  color: var(--gns-muted) !important;
  -webkit-text-fill-color: var(--gns-muted) !important;
}
.gns-reserved .gns-ov__more {
  font-size: 12px;
  color: var(--gns-cyan-ink) !important;
  text-decoration: none !important;
}
.gns-reserved .gns-ov__more:hover { text-decoration: underline !important; }

.gns-ov__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.gns-ov__item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--gns-border-faint);
}
.gns-ov__item:last-child { border-bottom: 0; }
.gns-ov__item-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.gns-ov__qty {
  font-family: var(--gns-font-mono);
  font-size: 12px;
  color: var(--gns-secondary);
  white-space: nowrap;
}

.gns-ov__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2px 12px;
  margin: 0;
  padding: 12px 18px 18px;
  list-style: none;
}
.gns-reserved .gns-ov__link {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 13px;
  color: var(--gns-body) !important;
  text-decoration: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.gns-reserved .gns-ov__link:hover {
  background: var(--gns-cyan-tint);
  border-color: var(--gns-border-cyan);
  color: var(--gns-text) !important;
}
/*
 * The affordance these rows actually need. Each one leaves the page, so the
 * mark belongs at the END and pointing forward - where a leading square said
 * "tick me" and did nothing.
 */
.gns-reserved .gns-ov__link::after {
  content: "\2192";
  margin-left: auto;
  padding-left: 10px;
  color: var(--gns-muted);
  transition: transform .15s ease, color .15s ease;
}
.gns-reserved .gns-ov__link:hover::after {
  color: var(--gns-cyan-ink);
  transform: translateX(2px);
}
@media (prefers-reduced-motion: reduce) {
  .gns-reserved .gns-ov__link::after { transition: none; }
  .gns-reserved .gns-ov__link:hover::after { transform: none; }
}

@media (max-width: 600px) {
  /*
   * Two up, not one. Three full-width tiles ran 300px down a 440px phone for
   * two figures and a balance - a third of a screen of mostly empty card. The
   * two counts pair naturally; the balance keeps the full width because
   * "GCOIN 10,000.00" is the one value that needs it.
   */
  .gns-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gns-stats > .gns-stat:nth-child(3) { grid-column: 1 / -1; }
  .gns-stat { padding: 14px 16px; }
  .gns-stat__num { font-size: 22px; }
  .gns-ov__item { flex-wrap: wrap; }
}

/* ========================================================== print progress === */
/*
 * The live panel and the owned-prints list. Replaces a page that had no data in
 * it at all - see the header comment on templates/print-progress.php.
 *
 * The only moving part is `.gns-print__fill`, whose width is written by
 * print-progress.js from the socket percentage. Everything else is static
 * chrome around real values.
 */

.gns-print__live {
  margin: 0 0 26px;
  padding: 16px 18px 18px;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-card);
  background: var(--gns-surface);
}
.gns-reserved .gns-print__eyebrow {
  margin: 0 0 12px;
  font: 500 9.5px var(--gns-font-mono) !important;
  letter-spacing: .14em;
  text-transform: uppercase !important;
  color: var(--gns-muted) !important;
  -webkit-text-fill-color: var(--gns-muted) !important;
}
.gns-print__livebody {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}
.gns-reserved .gns-print__idle {
  margin: 0;
  font-size: 13.5px;
  color: var(--gns-body) !important;
}
.gns-reserved .gns-print__hublink {
  font-size: 13px;
  color: var(--gns-cyan-ink) !important;
  text-decoration: none !important;
}
.gns-reserved .gns-print__hublink:hover { text-decoration: underline !important; }

/* ------------------------------------------------------------- a printer --- */

.gns-print__printer {
  flex: 1 1 260px;
  min-width: 0;
  padding: 13px 15px 15px;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-input);
  background: var(--gns-tint-weak);
}
.gns-print__printerhead {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gns-reserved .gns-print__printername {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gns-text) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gns-print__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--gns-muted);
}
.gns-print__printer.is-online .gns-print__dot { background: var(--gns-cyan); }
/* A live job pulses; a merely connected printer does not. */
.gns-print__printer.is-printing .gns-print__dot {
  background: var(--gns-cyan);
  animation: gns-print-pulse 1.6s ease-in-out infinite;
}
.gns-reserved .gns-print__printerstate {
  font: 500 10px var(--gns-font-mono) !important;
  letter-spacing: .1em;
  text-transform: uppercase !important;
  color: var(--gns-secondary-2) !important;
  -webkit-text-fill-color: var(--gns-secondary-2) !important;
}
.gns-print__printer.is-printing .gns-print__printerstate {
  color: var(--gns-cyan-ink) !important;
  -webkit-text-fill-color: var(--gns-cyan-ink) !important;
}

@keyframes gns-print-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

.gns-print__bar {
  margin: 12px 0 8px;
  height: 4px;
  border-radius: var(--gns-r-pill);
  background: var(--gns-tint-strong);
  overflow: hidden;
}
.gns-print__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gns-cyan), var(--gns-magenta));
  transition: width .4s ease;
}
.gns-print__printerfoot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.gns-reserved .gns-print__pct {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--gns-text) !important;
}
.gns-reserved .gns-print__left {
  font: 500 11px var(--gns-font-mono) !important;
  color: var(--gns-muted) !important;
  -webkit-text-fill-color: var(--gns-muted) !important;
}

/* --------------------------------------------------------- owned prints --- */

.gns-print__order {
  margin: 0 0 22px;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-card);
  background: var(--gns-surface);
  overflow: hidden;
}
.gns-print__orderhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--gns-border);
}
.gns-reserved .gns-print__ordered {
  font: 500 10.5px var(--gns-font-mono) !important;
  letter-spacing: .1em;
  text-transform: uppercase !important;
  color: var(--gns-muted) !important;
  -webkit-text-fill-color: var(--gns-muted) !important;
}
.gns-print__ordermeta {
  display: flex;
  align-items: center;
  gap: 16px;
}
.gns-reserved .gns-print__ordernum {
  font-size: 12.5px;
  color: var(--gns-secondary-2) !important;
}
.gns-reserved .gns-print__ordermeta a {
  font-size: 12.5px;
  color: var(--gns-cyan-ink) !important;
  text-decoration: none !important;
}
.gns-reserved .gns-print__ordermeta a:hover { text-decoration: underline !important; }

.gns-print__item {
  display: flex;
  gap: 16px;
  padding: 16px 18px;
}
.gns-print__item + .gns-print__item { border-top: 1px solid var(--gns-border-faint); }

.gns-print__thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: var(--gns-r-input);
  border: 1px solid var(--gns-border);
  background: var(--gns-elevated);
  overflow: hidden;
}
.gns-print__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gns-print__body { min-width: 0; flex: 1 1 auto; }

.gns-reserved .gns-print__name {
  margin: 0 0 4px;
  font-size: 15px !important;
  font-weight: 500;
  letter-spacing: -.01em;
}
.gns-reserved .gns-print__name a {
  color: var(--gns-text) !important;
  text-decoration: none !important;
}
.gns-reserved .gns-print__name a:hover { color: var(--gns-cyan-ink) !important; }

.gns-reserved .gns-print__line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--gns-secondary-2) !important;
}
.gns-reserved .gns-print__price { color: var(--gns-text) !important; font-weight: 500; }

.gns-reserved .gns-print__partslabel {
  margin: 0 0 6px;
  font: 500 9.5px var(--gns-font-mono) !important;
  letter-spacing: .12em;
  text-transform: uppercase !important;
  color: var(--gns-muted) !important;
  -webkit-text-fill-color: var(--gns-muted) !important;
}
.gns-print__parts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gns-print__part {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-input);
  background: var(--gns-tint-weak);
}
.gns-reserved .gns-print__partname {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gns-text) !important;
}
.gns-reserved .gns-print__material {
  font: 500 9.5px var(--gns-font-mono) !important;
  letter-spacing: .1em;
  text-transform: uppercase !important;
  color: var(--gns-cyan-ink) !important;
  -webkit-text-fill-color: var(--gns-cyan-ink) !important;
}
.gns-reserved .gns-print__specs {
  font-size: 11px;
  color: var(--gns-muted) !important;
}

/* ------------------------------------------------------------- nothing --- */

.gns-print__empty {
  padding: 44px 24px;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-card);
  background: var(--gns-surface);
  text-align: center;
}
.gns-reserved .gns-print__empty-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 500;
  color: var(--gns-text) !important;
}
.gns-reserved .gns-print__empty-text {
  max-width: 46ch;
  margin: 0 auto 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gns-body) !important;
}
.gns-reserved .gns-print__empty-btn {
  display: inline-block;
  padding: 11px 20px;
  border-radius: var(--gns-r-pill);
  background: var(--gns-text);
  color: var(--gns-bg) !important;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none !important;
}
.gns-reserved .gns-print__empty-btn:hover {
  background: var(--gns-cyan);
  color: var(--gns-on-accent) !important;
}

@media (max-width: 600px) {
  .gns-print__item { flex-direction: column; }
  .gns-print__thumb { width: 100%; height: 150px; }
  .gns-print__orderhead { flex-direction: column; align-items: flex-start; }
}

/* ================================================ certificates and devices === */
/*
 * Both screens are forks - see the header comments on templates/nft.php and
 * templates/hub-management.php. They share a lede, a notice block and an empty
 * state with the print screen above, so only what is particular to them is
 * declared here.
 */

.gns-reserved .gns-rs__lede,
.gns-reserved .gns-nft__lede {
  max-width: 62ch;
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gns-body) !important;
}

/* A statement of fact about the account, not an error. */
.gns-nft__note {
  padding: 16px 18px;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-card);
  background: var(--gns-surface);
}
.gns-reserved .gns-nft__note p {
  margin: 0 0 4px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gns-body) !important;
}
.gns-reserved .gns-nft__note p:last-child { margin-bottom: 0; }
/* Something went wrong on our side: a magenta edge, not a red alarm - nothing
   the customer owns is at risk, only the listing failed. */
.gns-nft__note--warn {
  border-left: 2px solid var(--gns-magenta);
  background: var(--gns-magenta-tint);
}

/* ------------------------------------------------------------ the grid --- */

.gns-nft__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.gns-nft__card {
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-card);
  background: var(--gns-surface);
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.gns-nft__card:hover {
  border-color: var(--gns-border-cyan);
  transform: translateY(-2px);
}
/*
 * A Right to Print has no single part, so it has no detail page - the template
 * renders a <span> in place of the <a>. Cancel the affordances that promise a
 * click: the lift, the cyan edge, and the pointer. See genesys_nft_detail_url()
 * in templates/nft.php for why these cards cannot be links.
 */
.gns-nft__card.is-static:hover {
  border-color: var(--gns-border);
  transform: none;
}
.gns-reserved .gns-nft__card.is-static .gns-nft__link { cursor: default; }

.gns-reserved .gns-nft__link {
  display: block;
  color: inherit !important;
  text-decoration: none !important;
}

.gns-nft__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--gns-elevated);
}
.gns-nft__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/*
 * Which of the two certificates this is. Right to Print is the entitlement you
 * buy, Proof of Print the record that it was made - so the first is cyan, the
 * accent this design uses for a live right, and the second magenta, which it
 * uses for the minted artefact.
 */
.gns-nft__kind {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  border-radius: var(--gns-r-chip);
  font: 500 9px var(--gns-font-mono) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.gns-nft__kind.is-rtp {
  background: rgba(0, 191, 255, .16);
  border: 1px solid var(--gns-border-cyan);
  color: var(--gns-cyan-ink) !important;
}
.gns-nft__kind.is-pop {
  background: rgba(255, 110, 255, .14);
  border: 1px solid var(--gns-border-magenta);
  color: var(--gns-magenta-ink) !important;
}

.gns-nft__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 14px 14px;
}
.gns-reserved .gns-nft__name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gns-text) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gns-nft__status {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: var(--gns-r-pill);
  border: 1px solid var(--gns-border-strong);
  font: 500 9.5px var(--gns-font-mono) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gns-secondary-2) !important;
}
.gns-nft__status.is-printed {
  border-color: var(--gns-border-magenta);
  color: var(--gns-magenta-ink) !important;
}
.gns-nft__status.is-available {
  border-color: var(--gns-border-cyan);
  color: var(--gns-cyan-ink) !important;
}
.gns-nft__status.is-printing {
  border-color: var(--gns-border-cyan);
  color: var(--gns-cyan-ink) !important;
}
.gns-nft__status.is-failed {
  border-color: var(--gns-border-magenta);
  color: var(--gns-magenta-ink) !important;
}

/* The hash is evidence, not a headline: monospace, quiet, and truncated in the
   template so a 66-character string cannot break the card. */
.gns-reserved .gns-nft__hash {
  font: 500 10.5px var(--gns-font-mono) !important;
  color: var(--gns-muted) !important;
  -webkit-text-fill-color: var(--gns-muted) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------- paging --- */

.gns-nft__pages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 22px 0 0;
}
.gns-reserved .gns-nft__page {
  min-width: 32px;
  padding: 6px 10px;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-chip);
  background: var(--gns-tint-weak);
  font-size: 12.5px;
  text-align: center;
  color: var(--gns-body) !important;
  text-decoration: none !important;
}
.gns-reserved .gns-nft__page:hover { border-color: var(--gns-border-cyan); }
.gns-reserved .gns-nft__page.is-current {
  border-color: var(--gns-cyan);
  background: var(--gns-cyan-tint);
  color: var(--gns-text) !important;
}

/* ============================================================== devices === */

.gns-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.gns-hub__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 18px;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-card);
  background: var(--gns-surface);
}
.gns-hub__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.gns-reserved .gns-hub__name {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--gns-text) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * ⚠️ `.hub-status` and `.printer-status` are written by socket.js, which
 * replaces their innerHTML with an <i> and a word and toggles `.active`. The
 * styling therefore has to work for markup this template does not control.
 */
.gns-reserved .gns-hub__state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  font: 500 9.5px var(--gns-font-mono) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gns-muted) !important;
  -webkit-text-fill-color: var(--gns-muted) !important;
}
.gns-reserved .gns-hub__state i { font-size: 7px; }
.gns-reserved .gns-hub__state.active {
  color: var(--gns-cyan-ink) !important;
  -webkit-text-fill-color: var(--gns-cyan-ink) !important;
}

.gns-reserved .gns-hub__update {
  align-self: flex-start;
  margin: 0;
  padding: 3px 9px;
  border: 1px solid var(--gns-border-cyan);
  border-radius: var(--gns-r-pill);
  background: var(--gns-cyan-tint);
  font: 500 9.5px var(--gns-font-mono) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gns-cyan-ink) !important;
  -webkit-text-fill-color: var(--gns-cyan-ink) !important;
}

.gns-hub__printer {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--gns-border-faint);
  border-radius: var(--gns-r-input);
  background: var(--gns-tint-weak);
}
.gns-reserved .gns-hub__brand {
  font-size: 13px;
  font-weight: 500;
  color: var(--gns-text) !important;
}
.gns-reserved .gns-hub__model {
  font-size: 12px;
  color: var(--gns-secondary-2) !important;
}
.gns-reserved .gns-hub__printer .gns-hub__state { margin-top: 5px; }

.gns-reserved .gns-hub__addr {
  margin: 0;
  font: 500 10px var(--gns-font-mono) !important;
  color: var(--gns-muted) !important;
  -webkit-text-fill-color: var(--gns-muted) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .gns-nft__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .gns-hub__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================== one certificate =========== */
/*
 * The detail screen behind a card on the certificates grid. A fork - see the
 * header on templates/nft-single.php. It reuses the reserved shell, the panel
 * and the empty-state language from the screens above; only what is particular
 * to a certificate is declared here.
 *
 * ⚠️ SOME SELECTORS HERE ARE NOT OURS. `.printer-box`, `.printer-modal-overlay`,
 * `.printer-modal-box`, `#warning-text` and `#hub-list` are the names
 * genesys/assets/js/script.js binds to, so they are styled where they are rather
 * than renamed into the gns- namespace.
 */

/*
 * ⚠️ CANCELLING THE PARENT'S PAGE FRAME.
 *   genesys/style.css:
 *     .slider-container, .main-content-container, .shop-container, ...
 *       { overflow:hidden; margin-top:var(--top-margin) !important }
 *     .main-content-container
 *       { padding:24px 80px; min-height:calc(100vh - 514px);
 *         max-width:1280px; margin:0 auto }
 *
 * `.main-content-container` is on <main> for one reason: script.js appends its
 * slicing message box to that selector (script.js:1030). Taking the name also
 * took the parent's whole page frame - a 131px top margin that opened a gap
 * under the rail, 80px side padding, a 1280px cap, and `overflow:hidden`, which
 * would additionally have killed the sticky certificate plate. The reserved
 * shell already supplies every one of those, so the parent's copy is undone.
 *
 * `!important` on margin-top only, and only because the parent's own
 * declaration is `!important`; the rest is won on specificity.
 */
.gns-reserved .gns-reserved__main.main-content-container {
  margin-top: 0 !important;
  overflow: visible;
  max-width: none;
}

.gns-reserved .gns-rs__back,
.gns-reserved .gns-cert__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  font: 500 11px var(--gns-font-mono) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gns-muted) !important;
  text-decoration: none !important;
}
.gns-reserved .gns-rs__back:hover,
.gns-reserved .gns-cert__back:hover { color: var(--gns-cyan-ink) !important; }

.gns-cert__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 22px;
}

/* Which certificate this is. Cyan is the live right, magenta the minted record -
   the same pairing the grid uses, so the two screens read as one thing. */
.gns-cert__kind {
  padding: 5px 10px;
  border-radius: var(--gns-r-chip);
  font: 500 9.5px var(--gns-font-mono) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.gns-cert__kind.is-rtp {
  border: 1px solid var(--gns-border-cyan);
  background: var(--gns-cyan-tint-2);
  color: var(--gns-cyan-ink) !important;
}
.gns-cert__kind.is-pop {
  border: 1px solid var(--gns-border-magenta);
  background: var(--gns-magenta-tint);
  color: var(--gns-magenta-ink) !important;
}

.gns-cert {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/* ------------------------------------------------------------ the plate --- */
/*
 * The certificate as a sealed object: one framed plate carrying the artwork,
 * its state, and the evidence underneath. It stays with you while the controls
 * on the right scroll, because it is what those controls are about.
 */
.gns-cert__plate {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-panel);
  background: var(--gns-surface);
}

.gns-cert__art {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--gns-border-faint);
  border-radius: var(--gns-r-card);
  background: var(--gns-elevated);
}
.gns-cert__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* No artwork is a state, not a failure: the grid and the wireframe say nothing
   was published, without the apologetic grey box of a broken image. */
.gns-cert__art.is-empty { background: var(--gns-elevated) var(--gns-grid); }
.gns-cert__ph { width: 62%; height: auto; }
.gns-reserved .gns-cert__phcap {
  margin: 0;
  font: 500 9.5px var(--gns-font-mono) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gns-muted) !important;
  -webkit-text-fill-color: var(--gns-muted) !important;
}

.gns-cert__status {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: var(--gns-r-pill);
  border: 1px solid var(--gns-border-strong);
  background: var(--gns-scrim);
  backdrop-filter: blur(6px);
  font: 500 9.5px var(--gns-font-mono) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gns-on-scrim) !important;
}
.gns-cert__status.is-printed,
.gns-cert__status.is-failed { border-color: var(--gns-border-magenta); }
.gns-cert__status.is-available,
.gns-cert__status.is-printing { border-color: var(--gns-border-cyan); }

/* Evidence, not headlines: monospace, quiet, truncated in the template with the
   full value on the title attribute. */
.gns-cert__chain { display: grid; gap: 9px; margin: 0; }
.gns-cert__chain > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.gns-reserved .gns-cert__chain dt {
  font: 500 9.5px var(--gns-font-mono) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gns-muted) !important;
  -webkit-text-fill-color: var(--gns-muted) !important;
}
.gns-reserved .gns-cert__chain dd {
  margin: 0;
  min-width: 0;
  font: 500 11.5px var(--gns-font-mono) !important;
  color: var(--gns-body) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gns-reserved .gns-cert__opensea {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  border: 1px solid var(--gns-border-strong);
  border-radius: var(--gns-r-input);
  background: var(--gns-tint-weak);
  font-size: 12.5px;
  color: var(--gns-body) !important;
  text-decoration: none !important;
}
.gns-reserved .gns-cert__opensea:hover {
  border-color: var(--gns-border-cyan);
  color: var(--gns-cyan-ink) !important;
}
.gns-cert__opensea i { font-size: 10px; }

/* ------------------------------------------------------------- the body --- */

.gns-cert__body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* A details element instead of the parent's WeakMap-and-innerHTML read-more. */
.gns-cert__about {
  padding: 16px 18px;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-card);
  background: var(--gns-surface);
}
.gns-cert__about summary {
  display: block;
  cursor: pointer;
  list-style: none;
}
.gns-cert__about summary::-webkit-details-marker { display: none; }
.gns-reserved .gns-cert__aboutlead {
  display: block;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--gns-body) !important;
}
.gns-reserved .gns-cert__more {
  display: inline-block;
  margin-top: 8px;
  font: 500 10px var(--gns-font-mono) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gns-cyan-ink) !important;
  -webkit-text-fill-color: var(--gns-cyan-ink) !important;
}
.gns-cert__about[open] .gns-cert__aboutlead { display: none; }
/* The label is the control, so it has to say what the next click does. */
.gns-cert__about[open] .gns-cert__more { font-size: 0 !important; }
.gns-cert__about[open] .gns-cert__more::after {
  content: attr(data-open);
  font: 500 10px var(--gns-font-mono);
  letter-spacing: .1em;
}
.gns-reserved .gns-cert__about p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--gns-body) !important;
}

.gns-rs__panel,
.gns-cert__panel {
  padding: 18px;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-card);
  background: var(--gns-surface);
}
.gns-reserved .gns-rs__panelhead,
.gns-reserved .gns-cert__panelhead {
  margin: 0 0 14px;
  font: 500 10px var(--gns-font-mono) !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gns-muted) !important;
  -webkit-text-fill-color: var(--gns-muted) !important;
}

.gns-cert__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gns-cert__slice { margin: 0; }

.gns-reserved .gns-rs__btn,
.gns-reserved .gns-cert__btn {
  padding: 11px 20px;
  border-radius: var(--gns-r-input);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.gns-reserved .gns-rs__btn--ghost,
.gns-reserved .gns-cert__btn--ghost {
  border: 1px solid var(--gns-border-strong);
  background: var(--gns-tint-weak);
  color: var(--gns-body) !important;
}
.gns-reserved .gns-rs__btn--ghost:hover:not(:disabled),
.gns-reserved .gns-cert__btn--ghost:hover:not(:disabled) { border-color: var(--gns-border-cyan); }
/* The one thing this page is for gets the only filled button on it. */
.gns-reserved .gns-rs__btn--go,
.gns-reserved .gns-cert__btn--go {
  border: 0;
  background: var(--gns-gradient);
  color: var(--gns-on-accent) !important;
}
.gns-reserved .gns-rs__btn--go:hover:not(:disabled),
.gns-reserved .gns-cert__btn--go:hover:not(:disabled) { box-shadow: var(--gns-glow-cta); }
.gns-reserved .gns-rs__btn:disabled,
.gns-reserved .gns-cert__btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

/* Disabled explains itself. A dead button with no reason is the thing people
   file support tickets about. */
.gns-reserved .gns-rs__hint,
.gns-reserved .gns-cert__hint {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--gns-secondary-2) !important;
}
.gns-reserved .gns-rs__empty,
.gns-reserved .gns-cert__empty {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gns-secondary-2) !important;
}

/* ---------------------------------------------------------- the printers --- */

.gns-cert__printers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.gns-reserved .gns-cert__printer {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--gns-border-faint);
  border-radius: var(--gns-r-input);
  background: var(--gns-tint-weak);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.gns-reserved .gns-cert__printer:hover:not(.disabled) { border-color: var(--gns-border-cyan); }
/* script.js toggles .selected on click - this is what that has to look like. */
.gns-reserved .gns-cert__printer.selected {
  border-color: var(--gns-cyan);
  background: var(--gns-cyan-tint);
}
.gns-reserved .gns-cert__printer.disabled { opacity: .5; cursor: not-allowed; }
.gns-reserved .gns-cert__printer .brand {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--gns-text) !important;
}
.gns-reserved .gns-cert__printer .model {
  margin: 0;
  font-size: 12px;
  color: var(--gns-secondary-2) !important;
}
.gns-reserved .gns-cert__printer .status {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 5px 0 0;
  font: 500 9.5px var(--gns-font-mono) !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gns-muted) !important;
  -webkit-text-fill-color: var(--gns-muted) !important;
}
.gns-reserved .gns-cert__printer .status i { font-size: 6px; }
.gns-reserved .gns-cert__printer .status.completed {
  color: var(--gns-cyan-ink) !important;
  -webkit-text-fill-color: var(--gns-cyan-ink) !important;
}
.gns-reserved .gns-cert__printer .status.error {
  color: var(--gns-magenta-ink) !important;
  -webkit-text-fill-color: var(--gns-magenta-ink) !important;
}

/* ------------------------------------------------------ the specification --- */

.gns-cert__specs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px;
  margin: 0;
  border: 1px solid var(--gns-border-faint);
  border-radius: var(--gns-r-input);
  background: var(--gns-border-faint);
  overflow: hidden;
}
.gns-cert__specs > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--gns-surface);
}
.gns-reserved .gns-cert__specs dt {
  font: 500 9.5px var(--gns-font-mono) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gns-muted) !important;
  -webkit-text-fill-color: var(--gns-muted) !important;
}
.gns-reserved .gns-cert__specs dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gns-text) !important;
}

@media (max-width: 900px) {
  .gns-cert { grid-template-columns: minmax(0, 1fr); }
  .gns-cert__plate { position: static; }
  .gns-cert__art { aspect-ratio: 16 / 10; }
}

/*
 * ⚠️ THE PARENT STYLES THESE TWO CONTROLS BY ID, so the class rules above lose
 * on specificity and the slicing button rendered full width in a violet pill:
 *
 *   genesys/style.css:6928  #startSlicing        { width:100%; display:flex; ... border-radius:50px }
 *   genesys/style.css:6941  #startSlicing button { width:100%; border-radius:50px; background:violamain }
 *   genesys/style.css:6955  #startSlicing button:disabled { background:darkgrey; color:white }
 *   genesys/style.css:6452  #start-print:disabled         { background:darkgrey; color:white }
 *
 * The ids cannot be renamed - script.js binds to both (996-1030, 1243) - so the
 * declarations are answered at equal weight instead. No `!important` anywhere
 * here: none of the parent rules use it, so out-ranking an id with
 * `.gns-reserved #id` (1,1,0 against 1,0,0) is enough.
 */
.gns-reserved #startSlicing {
  width: auto;
  display: inline-flex;
  border-radius: 0;
}
.gns-reserved #startSlicing button {
  width: auto;
  border: 1px solid var(--gns-border-strong);
  border-radius: var(--gns-r-input);
  background: var(--gns-tint-weak);
  color: var(--gns-body);
}
.gns-reserved #startSlicing button:hover:not(:disabled) {
  border-color: var(--gns-border-cyan);
  background: var(--gns-tint);
  color: var(--gns-cyan-ink);
}
/* Disabled is the resting state of both of these far more often than not, so it
   has to be a legible quiet - not the parent's flat grey slab. */
/* ⚠️ -webkit-text-fill-color, not just color: something upstream sets the fill
   on these buttons, and fill wins over `color` when both are present - measured,
   the disabled slicing button kept rendering at --gns-body until the fill was
   set too. Both are declared so the rule holds whichever is consulted. */
.gns-reserved #startSlicing button:disabled,
.gns-reserved #startSlicing button:hover:disabled,
.gns-reserved #start-print:disabled {
  border: 1px solid var(--gns-border);
  background: var(--gns-tint-weak);
  color: var(--gns-muted);
  -webkit-text-fill-color: var(--gns-muted);
  opacity: 1;
}
.gns-reserved #start-print:disabled { background: var(--gns-tint-weak); }

/* ================================ creator studio, account, support ======== */
/*
 * The remaining reserved screens: the library, the wallet, plans, cards,
 * profile and support. They are forks - see the header on each template.
 *
 * ⚠️ THE SHARED PIECES ARE DECLARED ONCE, ABOVE. `.gns-rs__back`,
 * `.gns-rs__panel`, `.gns-rs__panelhead`, `.gns-rs__btn` and `.gns-rs__lede`
 * share their rules with the certificate screen's `.gns-cert__*` names rather
 * than repeating them, so the two vocabularies cannot drift apart. Only what is
 * particular to these screens is below.
 *
 * ⚠️ SOME SELECTORS HERE ARE NOT OURS. `.printer-modal-overlay`, `.visa-card`,
 * `.view-copies`, `.twofa-button`, `.modal-btn-2`, `.form-control`,
 * `.message-box`, `#preview-image` and the modal ids are the names
 * genesys/assets/js/script.js and the two inline scripts bind to, so they are
 * styled where they are rather than renamed.
 */

.gns-reserved .gns-rs__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gns-secondary-2) !important;
}
/* A statement that something worked, not a warning. */
.gns-reserved .gns-rs__note--good {
  padding: 12px 16px;
  margin: 0 0 18px;
  border: 1px solid var(--gns-border-cyan);
  border-left-width: 2px;
  border-radius: var(--gns-r-card);
  background: var(--gns-cyan-tint);
  color: var(--gns-body) !important;
}

/* The head row gains an action on some screens (Payments), so it has to be able
   to hold one without the title losing its line. */
.gns-orders__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}

/* Shared inputs. The parent's .form-control is bootstrap's, sized for a light
   page; these screens are the only place this theme collects typed input. */
.gns-reserved .form-control {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gns-border-strong);
  border-radius: var(--gns-r-input);
  background: var(--gns-tint-weak);
  font-size: 13.5px;
  color: var(--gns-text) !important;
  -webkit-text-fill-color: var(--gns-text) !important;
}
.gns-reserved .form-control:focus {
  outline: 2px solid var(--gns-focus);
  outline-offset: 1px;
  border-color: transparent;
}
.gns-reserved .form-control[readonly] {
  background: transparent;
  color: var(--gns-secondary-2) !important;
  -webkit-text-fill-color: var(--gns-secondary-2) !important;
  cursor: default;
}

/* ================================================================= FAQ ==== */

.gns-faq {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
}
.gns-faq__item {
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-card);
  background: var(--gns-surface);
  overflow: hidden;
}
.gns-faq__item[open] { border-color: var(--gns-border-cyan); }

/* The WHOLE row is the control now - the parent bound its handler to the
   chevron alone, so clicking the question did nothing. */
.gns-faq__q {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.gns-faq__q::-webkit-details-marker { display: none; }
.gns-faq__q:focus-visible { outline: 2px solid var(--gns-focus); outline-offset: -2px; }

/* Presentational numbering. The parent gave each question its own
   <ol start="N"> holding a single <li>. */
.gns-reserved .gns-faq__num {
  flex: 0 0 auto;
  width: 22px;
  font: 500 10px var(--gns-font-mono) !important;
  color: var(--gns-muted) !important;
  -webkit-text-fill-color: var(--gns-muted) !important;
}
.gns-reserved .gns-faq__qtext {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--gns-text) !important;
}
.gns-faq__chev {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--gns-muted);
  transition: transform .18s var(--gns-ease-slice);
}
.gns-faq__item[open] .gns-faq__chev {
  transform: rotate(180deg);
  color: var(--gns-cyan-ink);
}
.gns-faq__a {
  padding: 0 16px 16px 50px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--gns-body);
}
.gns-reserved .gns-faq__a p { color: var(--gns-body) !important; }
.gns-reserved .gns-faq__a p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- contact --- */

.gns-support__ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.gns-reserved .gns-support__way {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--gns-border-strong);
  border-radius: var(--gns-r-input);
  background: var(--gns-tint-weak);
  text-decoration: none !important;
}
.gns-reserved .gns-support__way:hover {
  border-color: var(--gns-border-cyan);
  background: var(--gns-cyan-tint);
}
.gns-support__way i {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--gns-cyan-ink);
}
.gns-reserved .gns-support__waylabel {
  display: block;
  font: 500 9.5px var(--gns-font-mono) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gns-muted) !important;
  -webkit-text-fill-color: var(--gns-muted) !important;
}
.gns-reserved .gns-support__wayval {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gns-text) !important;
}

/* ============================================================== wallet ==== */
/*
 * The balance is the reason the page exists, so it is the page. It was a
 * right-aligned span the same size as its own label.
 */
.gns-coin__hero {
  padding: 26px 24px;
  margin: 0 0 14px;
  border: 1px solid var(--gns-border-cyan);
  border-radius: var(--gns-r-panel);
  background: var(--gns-cyan-tint), var(--gns-surface);
  background-color: var(--gns-surface);
}
.gns-reserved .gns-coin__label {
  margin: 0 0 10px;
  font: 500 10px var(--gns-font-mono) !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gns-muted) !important;
  -webkit-text-fill-color: var(--gns-muted) !important;
}
.gns-reserved .gns-coin__amount {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}
.gns-reserved .gns-coin__num {
  font: 500 40px/1 var(--gns-font-mono) !important;
  letter-spacing: -.02em;
  background: var(--gns-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gns-reserved .gns-coin__unit {
  font: 500 12px var(--gns-font-mono) !important;
  letter-spacing: .12em;
  color: var(--gns-secondary-2) !important;
}
/* No balance is not a zero balance, and must not be able to read as one. */
.gns-reserved .gns-coin__amount.is-unknown {
  font-size: 22px;
  font-weight: 500;
  color: var(--gns-secondary-2) !important;
  margin-bottom: 8px;
}

.gns-coin__about { margin-bottom: 14px; }
.gns-reserved .gns-coin__about p { color: var(--gns-body) !important; }
.gns-reserved .gns-coin__about p:last-child { margin-bottom: 0; }

/* =========================================================== the library == */

.gns-lib__list { display: grid; gap: 12px; }
.gns-lib__card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-card);
  background: var(--gns-surface);
}
.gns-lib__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--gns-border-faint);
  border-radius: var(--gns-r-input);
  background: var(--gns-elevated);
}
.gns-lib__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gns-lib__thumb.is-empty { background: var(--gns-elevated) var(--gns-grid); }
.gns-lib__thumb i { font-size: 22px; color: var(--gns-muted); }
.gns-reserved .gns-lib__name {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--gns-text) !important;
}
.gns-reserved .gns-lib__copies {
  margin: 0;
  font: 500 10px var(--gns-font-mono) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gns-cyan-ink) !important;
  -webkit-text-fill-color: var(--gns-cyan-ink) !important;
}
.gns-lib__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ⚠️ script.js:1141 appends .variant-details into the card - markup this
   template does not emit, so it is styled defensively. */
.gns-lib__card .variant-details { grid-column: 1 / -1; }
.gns-lib__card .variant-details hr {
  margin: 14px 0;
  border: 0;
  border-top: 1px solid var(--gns-border-faint);
}

/* ============================================================== cards ===== */

.gns-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.gns-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-card);
  background: var(--gns-surface);
  transition: opacity .2s ease;
}
.gns-card.is-default { border-color: var(--gns-border-cyan); }
/* script.js adds .removed while the delete is in flight. */
.gns-card.removed { opacity: .4; pointer-events: none; }

.gns-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.gns-card__brand { height: 24px; width: auto; }
.gns-reserved .gns-card__brandtext {
  font: 500 12px var(--gns-font-mono) !important;
  color: var(--gns-body) !important;
}
.gns-reserved .gns-card__pill {
  padding: 3px 9px;
  border: 1px solid var(--gns-border-cyan);
  border-radius: var(--gns-r-pill);
  background: var(--gns-cyan-tint);
  font: 500 9px var(--gns-font-mono) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gns-cyan-ink) !important;
  -webkit-text-fill-color: var(--gns-cyan-ink) !important;
}

.gns-reserved .gns-card__number {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  font: 500 15px var(--gns-font-mono) !important;
  color: var(--gns-text) !important;
}
.gns-card__dots { color: var(--gns-muted); letter-spacing: .06em; }
.gns-reserved .gns-card__exp {
  margin: 0;
  font: 500 10px var(--gns-font-mono) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gns-muted) !important;
  -webkit-text-fill-color: var(--gns-muted) !important;
}

.gns-card__actions {
  display: flex;
  gap: 14px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--gns-border-faint);
}
.gns-reserved .gns-card__act {
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  cursor: pointer;
  color: var(--gns-body) !important;
}
.gns-reserved .gns-card__act:hover { color: var(--gns-cyan-ink) !important; }
/* Removing a card is the destructive one, so it is the only one that is not
   the same weight as its neighbour. */
.gns-reserved .gns-card__act--danger { color: var(--gns-muted) !important; }
.gns-reserved .gns-card__act--danger:hover { color: var(--gns-magenta-ink) !important; }

/* ============================================================== modals ==== */
/*
 * The card, 2FA and password dialogs. `.modal` here is the parent's own class -
 * script.js and the inline scripts toggle these with .show()/.hide(), which
 * writes display directly, so the base rule must not be `display:flex`.
 */
.gns-modal,
.gns-cardmodal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--gns-scrim);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}
.gns-modal .modal-dialog,
.gns-cardmodal .modal-dialog { width: 100%; max-width: 460px; margin: auto; }
.gns-modal .modal-content,
.gns-cardmodal .modal-content {
  border: 1px solid var(--gns-border-strong);
  border-radius: var(--gns-r-panel);
  background: var(--gns-surface);
  box-shadow: var(--gns-shadow-pop);
  overflow: hidden;
}
.gns-modal .modal-header,
.gns-cardmodal .modal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gns-border-faint);
}
.gns-reserved .gns-modal .modal-title,
.gns-modal .modal-title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--gns-text);
}
.gns-modal .modal-body,
.gns-cardmodal .modal-body { padding: 20px; }
.gns-modal .modal-footer,
.gns-cardmodal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--gns-border-faint);
}
.gns-modal .modal-btn-2,
.gns-cardmodal .close-btn {
  padding: 9px 16px;
  border: 1px solid var(--gns-border-strong);
  border-radius: var(--gns-r-input);
  background: var(--gns-tint-weak);
  font-size: 13px;
  color: var(--gns-body);
  cursor: pointer;
}
.gns-modal .modal-btn-2:hover,
.gns-cardmodal .close-btn:hover { border-color: var(--gns-border-cyan); }
.gns-cardmodal .close-btn { padding: 6px 10px; }

.gns-modal label,
.gns-cardmodal label {
  display: block;
  margin: 0 0 6px;
  font: 500 9.5px var(--gns-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gns-muted);
}
.gns-cardmodal .info-holder { margin-bottom: 14px; }
/* Stripe mounts its cross-origin iframe in here; only the frame is ours. */
.gns-cardmodal #card-number,
.gns-cardmodal #card-expiry,
.gns-cardmodal #card-cvc {
  padding: 11px 12px;
  border: 1px solid var(--gns-border-strong);
  border-radius: var(--gns-r-input);
  background: var(--gns-tint-weak);
}
.gns-cardmodal .payment-box-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--gns-body);
}
.gns-cardmodal #result {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--gns-magenta-ink);
}
.gns-cardmodal .button-holder { margin-top: 4px; }

/* The 2FA walkthrough. script.js shows one .modal-ul-container at a time. */
.gns-modal .text-container { margin-bottom: 18px; }
.gns-modal .text-container:last-child { margin-bottom: 0; }
.gns-reserved .gns-modal .title,
.gns-modal .title {
  margin: 0 0 5px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gns-text);
}
.gns-reserved .gns-modal .desc,
.gns-modal .desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--gns-secondary-2);
}
.gns-modal #instructions {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--gns-body);
}
.gns-modal .barcode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--gns-border-faint);
  border-radius: var(--gns-r-input);
  background: var(--gns-tint-weak);
}
/* A QR code has to stay black on white to scan - it is data, not decoration,
   and inverting it in dark mode breaks the reader. */
.gns-modal #barcode-image {
  width: 150px;
  height: 150px;
  padding: 8px;
  border-radius: 8px;
  background: #FFFFFF;
}
.gns-modal #token-text {
  margin: 0;
  font: 500 12px var(--gns-font-mono);
  word-break: break-all;
  text-align: center;
  color: var(--gns-body);
}
.gns-modal #copy-token {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--gns-border-strong);
  border-radius: var(--gns-r-input);
  background: var(--gns-surface);
  font-size: 12.5px;
  color: var(--gns-body);
  cursor: pointer;
}
.gns-modal #copy-token:hover { border-color: var(--gns-border-cyan); }
.gns-modal #toast {
  display: none;
  font: 500 10px var(--gns-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gns-cyan-ink);
}
.gns-modal .step-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--gns-border-strong);
  border-radius: var(--gns-r-input);
  background: var(--gns-tint-weak);
  font-size: 13px;
  color: var(--gns-body);
  cursor: pointer;
}
.gns-modal .step-button.next {
  border: 0;
  background: var(--gns-gradient);
  color: var(--gns-on-accent);
}
.gns-modal .step-button .loader { display: none; }
.gns-modal .step-button.loading .loader { display: inline-block; }
.gns-modal #2fatoken-form input {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--gns-border-strong);
  border-radius: var(--gns-r-input);
  background: var(--gns-tint-weak);
  font: 500 20px var(--gns-font-mono);
  letter-spacing: .3em;
  text-align: center;
  color: var(--gns-text);
}
.gns-modal .error,
.gns-modal .error-text {
  display: none;
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--gns-magenta-ink);
}
.gns-modal .error.show,
.gns-modal .error-text.show { display: block; }
.gns-modal #step3 h1 {
  margin: 0 0 8px;
  font-size: 20px;
  color: var(--gns-text);
}

/* ============================================================= profile ==== */

.gns-prof__identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.gns-prof__avatar { position: relative; flex: 0 0 auto; }
.gns-prof__avatar #preview-image {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--gns-border-strong);
  background: var(--gns-elevated);
  display: block;
}
.gns-reserved .gns-prof__avatar .image-edit-button,
.gns-reserved .gns-prof__avatar .delete-image-button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--gns-border-strong);
  border-radius: 50%;
  background: var(--gns-elevated);
  font-size: 11px;
  color: var(--gns-body) !important;
  cursor: pointer;
}
.gns-reserved .gns-prof__avatar .image-edit-button { right: -2px; bottom: 4px; }
.gns-reserved .gns-prof__avatar .image-edit-button:hover { border-color: var(--gns-border-cyan); }
/* Only shown once there is a picture to remove - script.js adds .show. */
.gns-reserved .gns-prof__avatar .delete-image-button { left: -2px; bottom: 4px; display: none; }
.gns-reserved .gns-prof__avatar .delete-image-button.show { display: flex; }
.gns-reserved .gns-prof__avatar .delete-image-button:hover {
  border-color: var(--gns-border-magenta);
  color: var(--gns-magenta-ink) !important;
}

.gns-prof__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.gns-prof__field { margin: 0; }
.gns-prof__field--wide { grid-column: 1 / -1; }
.gns-reserved .gns-prof__field label {
  display: block;
  margin: 0 0 6px;
  font: 500 9.5px var(--gns-font-mono) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gns-muted) !important;
  -webkit-text-fill-color: var(--gns-muted) !important;
}
.gns-reserved .gns-prof__hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--gns-muted) !important;
}
.gns-reserved .inline-message.error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--gns-magenta-ink) !important;
}

.gns-prof__save {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--gns-border-faint);
}

.gns-prof__sec { display: grid; gap: 1px; background: var(--gns-border-faint); }
.gns-prof__secrow {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 2px;
  background: var(--gns-surface);
}
.gns-reserved .gns-prof__secname {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gns-text) !important;
}
.gns-reserved .gns-prof__secval {
  font-size: 12.5px;
  color: var(--gns-secondary-2) !important;
}
/* ⚠️ script.js swaps .show / .hide on both 2FA buttons after the state
   changes, so BOTH are always in the DOM and this is what hides one. */
.gns-reserved .twofa-button.hide { display: none; }
.gns-reserved .twofa-button.show { display: inline-flex; }

/* ======================================================== notifications === */
/*
 * ⚠️ .message-box IS BUILT BY SCRIPT, not by any template - script.js:1030 and
 * the payments inline script append it to .main-content-container. Unstyled it
 * arrived as bare black text at the very bottom of the page, below the fold.
 */
.gns-reserved .message-box {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1100;
  max-width: 340px;
  padding: 12px 16px;
  border: 1px solid var(--gns-border-cyan);
  border-radius: var(--gns-r-card);
  background: var(--gns-elevated);
  box-shadow: var(--gns-shadow-pop);
}
.gns-reserved .message-box.error { border-color: var(--gns-border-magenta); }
.gns-reserved .message-box .error-message {
  margin: 0;
  font-size: 13px;
  color: var(--gns-body) !important;
}

@media (max-width: 720px) {
  .gns-lib__card { grid-template-columns: 72px minmax(0, 1fr); }
  .gns-lib__actions { grid-column: 1 / -1; }
  .gns-prof__identity { grid-template-columns: minmax(0, 1fr); }
  .gns-prof__secrow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .gns-reserved .gns-coin__num { font-size: 32px !important; }
}

/* ------------------------------------------- inside the dialogs ---------- */
/*
 * ⚠️ THE MODALS ARE NOT INSIDE .gns-reserved. Every dialog on these screens is
 * a sibling of the page wrapper, appended after it so it can sit above the
 * whole layout - which means the `.gns-reserved .gns-rs__btn` rules above do
 * not reach them. Measured: the Save-card button fell back to a flat cyan slab
 * with no gradient. These repeat the button treatment scoped to the dialogs.
 */
.gns-modal .gns-rs__btn,
.gns-cardmodal .gns-rs__btn {
  padding: 11px 20px;
  border-radius: var(--gns-r-input);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.gns-modal .gns-rs__btn--ghost,
.gns-cardmodal .gns-rs__btn--ghost {
  border: 1px solid var(--gns-border-strong);
  background: var(--gns-tint-weak);
  color: var(--gns-body);
}
.gns-modal .gns-rs__btn--go,
.gns-cardmodal .gns-rs__btn--go,
/* ⚠️ #save-card-button sits in .button-holder, which the parent styles by
   descendant type selector; the id keeps this above it either way. */
.gns-cardmodal #save-card-button {
  border: 0;
  background: var(--gns-gradient);
  color: var(--gns-on-accent);
}
.gns-modal .gns-rs__btn--go:hover:not(:disabled),
.gns-cardmodal #save-card-button:hover:not(:disabled) { box-shadow: var(--gns-glow-cta); }
.gns-modal .gns-rs__btn:disabled,
.gns-cardmodal .gns-rs__btn:disabled { opacity: .45; cursor: not-allowed; }

/*
 * ⚠️ THE PARENT PAINTS THE CARD FORM LILAC:
 *     genesys/style.css  #add-card-form { background:#DCD7E3; padding:20px;
 *                                         display:flex; flex-wrap:wrap;
 *                                         gap:20px; border-radius:16px }
 * An id selector, so the class rules above cannot reach it. It is a light-mode
 * panel-inside-a-panel that fights both themes; the dialog is already a
 * surface, so the form itself should be transparent.
 */
.gns-cardmodal #add-card-form {
  padding: 0;
  gap: 0;
  border-radius: 0;
  background: transparent;
}
/* Expiry and CVC share a row; the number takes its own. */
.gns-cardmodal #add-card-form .info-holder { flex: 1 1 100%; }
.gns-cardmodal #add-card-form .col-sm-6 { flex: 1 1 calc(50% - 7px); }
.gns-cardmodal #add-card-form { display: flex; flex-wrap: wrap; gap: 14px; }
.gns-cardmodal #add-card-form .button-holder { flex: 1 1 100%; margin-top: 2px; }
.gns-cardmodal #add-card-form .button-holder button { width: 100%; }

/* ============================================================== plans ===== */
/*
 * ⚠️ THE PLANS THEMSELVES ARE ALREADY DESIGNED - IN pricing.css. That file
 * styles every component the `genesys_subscriptions` shortcode prints (tiers,
 * comparison table, "why subscribe", the checkout dialog) under
 * `body.gns-pricing`, which this page carries. Restyling them again here only
 * produced two half-applied designs fighting on specificity, so this block is
 * deliberately small: it holds ONLY what is particular to showing that
 * shortcode inside the reserved shell.
 *
 * Anything about how a plan card looks belongs in pricing.css.
 */

/*
 * ⚠️ THE SHORTCODE PRINTS A SECOND <h1>. `.title-holder` holds
 * `<h1 class="subscription-main-title">` plus a standfirst, both from ACF, so
 * the page shipped two h1 elements and two ledes. templates/subscription.php
 * now reads those same two fields and renders them as the page's own title and
 * lede, so this block is the duplicate - removed from the layout and from the
 * accessibility tree alike.
 */
.gns-sub__plans .title-holder { display: none; }

/* Both open with a large top margin meant for a standalone page; inside the
   reserved shell the heading above has already done the spacing. */
.gns-sub__plans .subscriptions { margin-top: 0; }
.gns-sub__plans .comparison-table { margin-top: 0; }

/*
 * ⚠️ THIS BOX USED TO LIE. Until the plugin gained a `$subscriptions_failed`
 * flag, a 403 from `api/subscription` fell through to "No subscriptions are
 * available for this selection." - measured: that endpoint answers 403 "Not
 * enough permission to access the resource" for a normal marketplace account,
 * so every customer was told the catalogue was empty. `.is-error` is the honest
 * branch, toned as a problem on our side rather than a flat statement of fact.
 */
.gns-reserved .gns-sub__plans .empty-box.is-error {
  grid-column: 1 / -1;
  padding: 18px 20px;
  border: 1px solid var(--gns-border);
  border-left: 2px solid var(--gns-magenta);
  border-radius: var(--gns-r-card);
  background:
    linear-gradient(var(--gns-magenta-tint), var(--gns-magenta-tint)),
    var(--gns-surface);
  font-size: 13.5px;
  line-height: 1.6;
  text-align: left;
  color: var(--gns-body) !important;
}

/* Each "why subscribe" reason is one line of text in a card, but its <p> keeps
   the theme's default 20px bottom margin, so every card carried a band of dead
   space under its own sentence. Scoped to the reserved shell: the standalone
   pricing page owns its own spacing. */
.gns-reserved .gns-sub__plans .include-list p { margin: 0; }