/* Surfaces for .crypto-surface routes. Reuse on later data pages by adding the class. */

.crypto-surface,
.crypto-surface .tool-hero-band,
.crypto-surface .article-tool-slot,
.crypto-surface .converter-workbench,
.crypto-surface .converter-form,
.crypto-surface .converter-fields,
.crypto-surface .input-shell,
.crypto-surface .converter,
.crypto-surface .instrument-surface {
  min-width: 0;
  max-width: 100%;
}

body.gp-page .crypto-surface [hidden] {
  display: none !important;
}

body.gp-page .crypto-surface.gp-guide.article-variant-tool {
  padding-top: 0;
}

body.gp-page .crypto-surface .tool-hero-band {
  width: 100%;
  margin: 0;
  padding: 1.75rem 0 2rem;
  background: var(--crypto-hero);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.gp-page .crypto-surface .tool-hero-band > .gp-shell,
body.gp-page .crypto-surface .tool-body-shell {
  max-width: 800px;
}

body.gp-page .crypto-surface .article-hero,
body.gp-page .crypto-surface.article-page .article-hero,
body.gp-page .crypto-surface .article-variant-tool .article-hero,
body.gp-page .crypto-surface .tool-hero-band .article-hero {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
}

body.gp-page .crypto-surface .article-hero > *,
body.gp-page .crypto-surface.article-page .article-hero > * {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

body.gp-page .crypto-surface h1,
body.gp-page .crypto-surface .gp-title,
body.gp-page .crypto-surface.article-page h1 {
  max-width: 22ch;
  margin: 1.5rem 0 0;
  color: var(--crypto-ink);
  font: 500 clamp(2rem, 0.9rem + 3.2vw, 3rem) / 1.08 var(--crypto-serif);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

body.gp-page .crypto-surface .gp-lead,
body.gp-page .crypto-surface .converter-intro,
body.gp-page .crypto-surface.article-page .converter-intro {
  max-width: 40rem;
  margin: 1rem 0 0;
  color: var(--crypto-ink-soft);
  font: 400 clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem) / 1.5 var(--crypto-serif);
  text-wrap: pretty;
}

body.gp-page .crypto-surface .gp-byline {
  margin-top: 1.25rem;
}

body.gp-page .crypto-surface .article-tool-slot {
  width: 100%;
  min-width: 0;
  margin-top: var(--crypto-space-lg);
}

body.gp-page .crypto-surface .converter-workbench,
body.gp-page .crypto-surface .instrument-surface,
body.gp-page .crypto-surface .converter,
body.gp-page .crypto-surface.article-variant-tool .converter-workbench {
  display: grid;
  gap: var(--crypto-space-lg);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--crypto-line);
  border-radius: 14px;
  background: var(--crypto-workbench);
  color: var(--crypto-ink);
  color-scheme: light;
  box-shadow: none;
}

@media (min-width: 40rem) {
  body.gp-page .crypto-surface .converter-workbench,
  body.gp-page .crypto-surface .instrument-surface,
  body.gp-page .crypto-surface .converter,
  body.gp-page .crypto-surface.article-variant-tool .converter-workbench {
    padding: 2rem;
  }
}

body.gp-page .crypto-surface .converter-form {
  display: grid;
  gap: var(--crypto-space-lg);
}

body.gp-page .crypto-surface .converter-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.75rem minmax(0, 1fr);
  gap: var(--crypto-space-md);
  align-items: end;
}

body.gp-page .crypto-surface .converter-fields label {
  display: grid;
  gap: var(--crypto-space-xs);
  min-width: 0;
  color: var(--crypto-ink);
  font: 500 0.9375rem / 1.3 var(--crypto-sans);
}

body.gp-page .crypto-surface .input-shell,
body.gp-page .crypto-surface .conv-input .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  min-height: var(--crypto-control);
  border: 1px solid var(--crypto-line);
  border-radius: 0.75rem;
  background: var(--crypto-wash);
  color: var(--crypto-ink);
}

body.gp-page .crypto-surface .input-shell input,
body.gp-page .crypto-surface .conv-input input,
body.gp-page .crypto-surface .instrument-surface input[type="text"] {
  width: 100%;
  min-width: 0;
  min-height: var(--crypto-control);
  padding: 0.75rem 0.85rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--crypto-ink);
  font: 500 var(--crypto-input-text) / 1.2 var(--crypto-sans);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

body.gp-page .crypto-surface .input-shell b,
body.gp-page .crypto-surface .cur-chip {
  padding: 0 0.9rem;
  color: var(--crypto-ink);
  font: 600 0.75rem / 1 var(--crypto-sans);
  letter-spacing: 0.04em;
}

body.gp-page .crypto-surface .converter-equals {
  display: grid;
  place-items: center;
  min-height: var(--crypto-control);
  padding: 0;
  color: var(--crypto-ink);
  font: 500 1.25rem / 1 var(--crypto-sans);
  white-space: nowrap;
}

body.gp-page .crypto-surface .converter-rate {
  display: flex;
  flex-wrap: wrap;
  gap: var(--crypto-space-xs) var(--crypto-space-md);
  align-items: baseline;
  margin: 0;
  color: var(--crypto-ink);
}

body.gp-page .crypto-surface .converter-rate strong,
body.gp-page .crypto-surface #converter-rate {
  color: var(--crypto-ink);
  font: 500 1rem / 1.35 var(--crypto-sans);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

body.gp-page .crypto-surface .converter-slider,
body.gp-page .crypto-surface .tool-slider {
  display: grid;
  gap: var(--crypto-space-xs);
  max-width: none;
  margin: 0;
}

body.gp-page .crypto-surface .converter-slider > label,
body.gp-page .crypto-surface .tool-slider > label {
  color: var(--crypto-ink);
  font: 500 0.9375rem / 1.3 var(--crypto-sans);
}

body.gp-page .crypto-surface input[type="range"],
body.gp-page .crypto-surface .converter-slider input[type="range"],
body.gp-page .crypto-surface .tool-slider input[type="range"],
body.gp-page .crypto-surface .calc-range {
  width: 100%;
  height: var(--crypto-control);
  margin: 0;
  padding: 0;
  background: transparent;
  accent-color: var(--crypto-ink);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

body.gp-page .crypto-surface input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--crypto-control-line);
  border: 0;
}

body.gp-page .crypto-surface input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.5625rem;
  border: 0;
  border-radius: 50%;
  background: var(--crypto-ink);
}

body.gp-page .crypto-surface input[type="range"]::-moz-range-track {
  height: 2px;
  background: var(--crypto-control-line);
  border: 0;
}

body.gp-page .crypto-surface input[type="range"]::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  border: 0;
  border-radius: 50%;
  background: var(--crypto-ink);
}

body.gp-page .crypto-surface .slider-scale,
body.gp-page .crypto-surface .converter-slider-endpoints,
body.gp-page .crypto-surface .range-scale {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--crypto-ink-soft);
  font: 400 0.75rem / 1.4 var(--crypto-sans);
}

body.gp-page .crypto-surface .slider-scale span:nth-child(2),
body.gp-page .crypto-surface .converter-slider-endpoints span:nth-child(2) {
  text-align: center;
}

body.gp-page .crypto-surface .slider-scale span:last-child,
body.gp-page .crypto-surface .converter-slider-endpoints > :last-child,
body.gp-page .crypto-surface .range-scale > :last-child {
  text-align: right;
}

body.gp-page .crypto-surface #converter-note,
body.gp-page .crypto-surface .converter-status,
body.gp-page .crypto-surface .converter-feedback {
  max-width: 40rem;
  margin: 0;
  color: var(--crypto-ink-soft);
  font: 400 0.9375rem / 1.5 var(--crypto-sans);
}

body.gp-page .crypto-surface .converter-status,
body.gp-page .crypto-surface .converter-feedback {
  min-height: 1.5em;
}

body.gp-page .crypto-surface .input-shell:has(input[aria-invalid="true"]),
body.gp-page .crypto-surface .conv-input:has(input[aria-invalid="true"]) .row {
  border-color: var(--crypto-bad);
}

body.gp-page .crypto-surface .converter-workbench:has(input[aria-invalid="true"]) .converter-status {
  color: var(--crypto-bad);
}

body.gp-page .crypto-surface .crypto-meta,
body.gp-page .crypto-surface .market-provenance {
  display: grid;
  gap: 0.25rem;
  margin-top: var(--crypto-space-lg);
  color: var(--crypto-ink-soft);
  font: 400 0.9375rem / 1.5 var(--crypto-sans);
  overflow-wrap: anywhere;
}

body.gp-page .crypto-surface .tool-status-warning {
  display: none;
  margin: 0;
  color: var(--crypto-ink);
  font: 500 0.9375rem / 1.5 var(--crypto-sans);
  overflow-wrap: anywhere;
}

html[data-market-state="delayed"] body.gp-page .crypto-surface .tool-status-warning,
html[data-market-state="unavailable"] body.gp-page .crypto-surface .tool-status-warning {
  display: block;
}

body.gp-page .crypto-surface [data-market-status],
body.gp-page .crypto-surface [data-market-status-text] {
  color: var(--crypto-ink);
}

body.gp-page .crypto-surface [data-market-status].is-delayed {
  color: var(--crypto-ink);
  font-weight: 500;
}

body.gp-page .crypto-surface .crypto-source {
  margin-top: var(--crypto-space-sm);
  border-top: 1px solid var(--crypto-line);
  color: var(--crypto-ink-soft);
  font: 400 0.9375rem / 1.5 var(--crypto-sans);
}

body.gp-page .crypto-surface .crypto-source summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--crypto-control);
  padding: 0;
  color: var(--crypto-ink);
  cursor: pointer;
  list-style: none;
}

body.gp-page .crypto-surface .crypto-source summary::-webkit-details-marker {
  display: none;
}

body.gp-page .crypto-surface .crypto-source summary::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  flex: none;
  margin-left: 0.1rem;
  border-right: 1.5px solid var(--crypto-ink);
  border-bottom: 1.5px solid var(--crypto-ink);
  transform: rotate(-45deg);
}

body.gp-page .crypto-surface .crypto-source[open] summary::before {
  transform: rotate(45deg);
}

body.gp-page .crypto-surface .crypto-source summary + *,
body.gp-page .crypto-surface .crypto-source .market-fx-note {
  margin: 0 0 0.75rem;
  padding: 0 0 0 1.15rem;
  color: var(--crypto-ink-soft);
  font: 400 0.9375rem / 1.5 var(--crypto-sans);
}

body.gp-page .crypto-surface .market-fx-note[hidden] {
  display: none;
}

body.gp-page .crypto-surface :is(a, button, select, textarea, summary):focus {
  outline: none;
}

body.gp-page .crypto-surface :is(a, button, select, textarea, summary):focus-visible,
body.gp-page .crypto-surface .input-shell:focus-within,
body.gp-page .crypto-surface .conv-input .row:focus-within,
body.gp-page .crypto-surface input[type="range"]:focus-visible {
  outline: 2px solid var(--crypto-focus);
  outline-offset: 2px;
}

body.gp-page .crypto-surface .input-shell:focus-within,
body.gp-page .crypto-surface .conv-input .row:focus-within {
  border-color: var(--crypto-ink);
  outline: 2px solid var(--crypto-focus);
  outline-offset: 2px;
}

body.gp-page .crypto-surface .input-shell input:focus,
body.gp-page .crypto-surface .input-shell input:focus-visible,
body.gp-page .crypto-surface .conv-input input:focus,
body.gp-page .crypto-surface .conv-input input:focus-visible {
  outline: none;
}

body.gp-page .crypto-surface .gp-body,
body.gp-page .crypto-surface .article-main {
  margin-top: var(--crypto-space-2xl);
  color: var(--crypto-ink);
  font: 400 1.125rem / 1.6 var(--crypto-serif);
}

@media (min-width: 45rem) {
  body.gp-page .crypto-surface .gp-body,
  body.gp-page .crypto-surface .article-main {
    font-size: 1.25rem;
    line-height: 1.65;
  }
}

body.gp-page .crypto-surface .gp-body > * + * {
  margin-top: 2.5rem;
}

body.gp-page .crypto-surface .article-section,
body.gp-page .crypto-surface .editorial-section,
body.gp-page .crypto-surface .converter-copy {
  max-width: none;
  padding-top: 0;
}

body.gp-page .crypto-surface .gp-body h2,
body.gp-page .crypto-surface .article-section h2,
body.gp-page .crypto-surface .editorial-section h2,
body.gp-page .crypto-surface .converter-copy h2 {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--crypto-ink);
  font: 500 1.875rem / 1.2 var(--crypto-serif);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

body.gp-page .crypto-surface .gp-body h2 + *,
body.gp-page .crypto-surface .article-section h2 + * {
  margin-top: 0.85rem;
}

body.gp-page .crypto-surface .gp-body p,
body.gp-page .crypto-surface .article-section p {
  color: var(--crypto-ink);
  text-wrap: pretty;
}

body.gp-page .crypto-surface .gp-body p + p,
body.gp-page .crypto-surface .article-section p + p,
body.gp-page .crypto-surface .converter-copy p + p {
  margin-top: 1rem;
}

body.gp-page .crypto-surface .gp-body a,
body.gp-page .crypto-surface .article-section a,
body.gp-page .crypto-surface .converter-copy a {
  color: var(--crypto-ink);
  text-decoration: underline;
  text-decoration-color: var(--crypto-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

body.gp-page .crypto-surface .converter-faq-price {
  margin-top: 1rem;
  color: var(--crypto-ink-soft);
}

body.gp-page .crypto-surface .crypto-figure,
body.gp-page .crypto-surface .tool-photo {
  width: min(100%, 28rem);
  max-width: 100%;
  margin: 1.5rem 0 0;
}

body.gp-page .crypto-surface .crypto-figure img,
body.gp-page .crypto-surface .tool-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}

body.gp-page .crypto-surface .faq-list,
body.gp-page .crypto-surface .gp-faq {
  max-width: none;
  margin: 1rem 0 0;
  border-top: 1px solid var(--crypto-line);
}

body.gp-page .crypto-surface .faq-item,
body.gp-page .crypto-surface .gp-faq details {
  margin: 0;
  padding: 0;
  border-top: 0;
  border-bottom: 1px solid var(--crypto-line);
}

body.gp-page .crypto-surface .faq-item summary,
body.gp-page .crypto-surface .gp-faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--crypto-control);
  padding: 1rem 0;
  color: var(--crypto-ink);
  font: 500 1.25rem / 1.35 var(--crypto-serif);
  cursor: pointer;
  list-style: none;
}

body.gp-page .crypto-surface .faq-item summary::-webkit-details-marker,
body.gp-page .crypto-surface .gp-faq summary::-webkit-details-marker {
  display: none;
}

body.gp-page .crypto-surface .faq-item summary::after,
body.gp-page .crypto-surface .gp-faq summary::after {
  content: "+";
  flex: none;
  width: 1.5rem;
  color: var(--crypto-ink-soft);
  font: 400 1.5rem / 1 var(--crypto-serif);
  text-align: right;
}

body.gp-page .crypto-surface .faq-item[open] summary::after,
body.gp-page .crypto-surface .gp-faq details[open] summary::after {
  content: "\2212";
  color: var(--crypto-ink-soft);
}

body.gp-page .crypto-surface .faq-item summary h3 {
  display: inline;
  max-width: none;
  margin: 0;
  color: inherit;
  font: inherit;
}

body.gp-page .crypto-surface .faq-answer,
body.gp-page .crypto-surface .faq-item[open] > div,
body.gp-page .crypto-surface .gp-faq-answer {
  margin: 0;
  padding: 0 2.5rem 1.25rem 0;
  color: var(--crypto-ink-soft);
  font: 400 1.125rem / 1.6 var(--crypto-serif);
}

body.gp-page .crypto-surface .faq-answer p,
body.gp-page .crypto-surface .faq-item[open] > div p {
  margin: 0;
  color: inherit;
  font: inherit;
}

body.gp-page .crypto-surface :is(.pos, .up, .is-up) {
  color: var(--crypto-good);
}

body.gp-page .crypto-surface :is(.neg, .down, .is-down) {
  color: var(--crypto-bad);
}

@media (max-width: 40rem) {
  body.gp-page .crypto-surface .tool-hero-band {
    padding: 1.5rem 0 1.75rem;
  }

  body.gp-page .crypto-surface .converter-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  body.gp-page .crypto-surface .converter-equals {
    min-height: 1.75rem;
    padding: 0;
  }

  body.gp-page .crypto-surface .crypto-figure,
  body.gp-page .crypto-surface .tool-photo {
    width: 100%;
  }
}

@media (max-width: 22.5rem) {
  body.gp-page .crypto-surface h1,
  body.gp-page .crypto-surface .gp-title,
  body.gp-page .crypto-surface.article-page h1 {
    max-width: none;
  }

  body.gp-page .crypto-surface .input-shell input,
  body.gp-page .crypto-surface .conv-input input {
    font-size: var(--crypto-input-text);
  }
}

/* Reset inherited article typography at the data/prose boundary. */
body.gp-page .crypto-surface .crypto-meta {
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  gap: 0.25rem;
}
body.gp-page .crypto-surface .crypto-meta p,
body.gp-page .crypto-surface .crypto-source p {
  width: auto;
  max-width: none;
  margin: 0;
  justify-self: stretch;
  font: 400 0.9375rem/1.5 var(--crypto-sans);
  color: var(--crypto-ink-soft);
  text-align: left;
}
body.gp-page .crypto-surface .gp-body .article-section p,
body.gp-page .crypto-surface .gp-body .article-section li {
  max-width: none;
  margin-inline: 0;
  font: inherit;
}

/* Tool lists: keep markers, align text with surrounding prose. */
body.gp-page .crypto-surface .gp-body ul,
body.gp-page .crypto-surface .gp-body ol,
body.gp-page .crypto-surface .article-section ul,
body.gp-page .crypto-surface .article-section ol {
  max-width: none;
  margin: 1rem 0 0;
  margin-inline: 0;
  padding-inline-start: 0;
  list-style-position: outside;
}

body.gp-page .crypto-surface .gp-body li,
body.gp-page .crypto-surface .article-section li {
  padding-inline: 0;
}

body.gp-page .crypto-surface .gp-body li::marker,
body.gp-page .crypto-surface .article-section li::marker {
  color: var(--crypto-ink);
}
body.gp-page .crypto-surface .crypto-figure,
body.gp-page .crypto-surface .tool-photo {
  width: 100%;
}
body.gp-page .crypto-surface .crypto-figure img,
body.gp-page .crypto-surface .tool-photo img {
  aspect-ratio: 21/9;
  border-radius: 0;
}

/* Table labels are sentence case; prose keeps the guide's own typeface. */
body.gp-page .crypto-surface .article-section th { font: 500 .875rem/1.45 var(--crypto-sans); text-transform: none; letter-spacing: normal; }