/* =====================================================================================================
   Pages A: markets, pool check, offers, one offer, history and the coin page.
   Every class here starts with .sw-a- and colours come only from the tokens in stillwater.css, so the light
   theme follows on its own.
   ===================================================================================================== */

/* -------------------------------------------------------------------------------------------- shared */

.sw-a-after { margin-top: 16px; }
.sw-a-label { color: var(--faint); font-size: 12.5px; }
.sw-a-more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.sw-a-foot { margin-top: 18px; color: var(--faint); font-size: 13.5px; }
.sw-a-note {
  max-width: 82ch;
  margin-top: 18px;
  color: var(--faint);
  font-size: 13px;
  line-height: 1.6;
  text-wrap: pretty;
}
.sw-a-note b { color: var(--mute); font-weight: 600; }
.sw-a-center-row { justify-content: center; }
.sw-a-day-count { margin-left: 6px; color: var(--faint); font-weight: 500; letter-spacing: 0; }

/* A meter and its percentage, side by side. */
.sw-a-move { display: inline-flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.sw-a-move > span:last-child { min-width: 7ch; text-align: right; }

/* An offer's side, tags and number in one cell. */
.sw-a-offer-id { display: inline-flex; align-items: center; gap: 8px; }

/* Visually hidden header labels (.sw-sr) are absolutely positioned. Without a positioned wrapper they escape the
   scrolling wrapper, widen the page on phones and push dialogs off screen. */
.sw-a-wrap { position: relative; }

/* Wide tables that share the row with a rail get narrower cells. */
.sw-a-tight th, .sw-a-tight td { padding-right: 10px; padding-left: 10px; }
.sw-a-tight th:first-child, .sw-a-tight td:first-child { padding-left: 16px; }
.sw-a-tight th:last-child, .sw-a-tight td:last-child { padding-right: 16px; }

/* ------------------------------------------------------------------------------------------- markets */

.sw-a-markets {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: auto 1fr;
  grid-template-areas: "desk calc" "list calc";
  align-items: start;
  gap: 48px 24px;
}
.sw-a-desk { grid-area: desk; min-width: 0; container-type: inline-size; }
.sw-a-list { grid-area: list; min-width: 0; }
.sw-a-calc { grid-area: calc; min-width: 0; container-type: inline-size; }

.sw-a-desk .sw-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container (max-width: 600px) {
  .sw-a-desk .sw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sw-a-calc > h3 { margin-bottom: 4px; }
.sw-a-calc-fields { display: grid; gap: 14px; margin-top: 14px; }
.sw-a-calc .sw-lines > div:not(:first-child) { padding-top: 8px; }
.sw-a-calc .sw-lines > div:not(:last-child) { padding-bottom: 8px; }
.sw-a-calc-fields > .sw-field + .sw-field { margin-top: 0; }
.sw-a-usd { position: relative; }
.sw-a-usd > span {
  position: absolute;
  top: 50%;
  left: 12px;
  color: var(--faint);
  transform: translateY(-50%);
  pointer-events: none;
}
.sw-a-usd > .sw-input { padding-left: 25px; }
.sw-a-presets { display: flex; margin-top: 8px; }
.sw-a-presets > button { flex: 1 1 0; justify-content: center; padding: 0 6px; }
.sw-a-calc-out {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Given the whole width (between the desk and the list), the calculator sets its chart beside the figures. */
@container (min-width: 640px) {
  .sw-a-calc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .sw-a-calc-out { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; column-gap: 32px; }
  .sw-a-calc-out > .sw-coin, .sw-a-calc-out > p { grid-column: 1 / -1; }
  .sw-a-calc-out > .sw-chart { grid-row: 2 / span 2; grid-column: 1; }
  .sw-a-calc-out > .sw-lines, .sw-a-calc-out > .sw-btn { grid-column: 2; }
}

.sw-a-market .sw-coin small { max-width: 16ch; }
.sw-table tr.sw-row.sw-a-picked > td { background: var(--accent-soft); }
.sw-table tr.sw-row.sw-a-picked > td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

/* The market table needs about 750px, so the rail only sits beside it on wide screens. There the calculator
   stays in view while the table scrolls, if the screen is tall enough; a slightly short one scrolls it inside. */
@media (min-width: 1200px) and (min-height: 900px) {
  .sw-a-calc {
    position: sticky;
    top: calc(var(--top-total) + 16px);
    max-height: calc(100vh - var(--top-total) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

@media (max-width: 1199px) {
  .sw-a-markets {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "desk" "calc" "list";
    gap: 40px;
  }
}

/* ---------------------------------------------------------------------------------------- pool check */

.sw-a-verdict { margin: 2px 0 14px; color: var(--mute); font-size: 14px; }
.sw-a-verdict:empty { display: none; }
.sw-a-pools .sw-rank { width: 1%; }

/* --------------------------------------------------------------------------------------------- offer */

.sw-a-card { padding: 26px 28px 28px; }
.sw-a-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.sw-a-card-status { margin-left: auto; }
.sw-a-card-head { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.sw-a-card-head > div { min-width: 0; }
.sw-a-card-head h1 { font: 400 34px/1.12 var(--serif); letter-spacing: -0.012em; overflow-wrap: anywhere; }
.sw-a-card-verb {
  display: block;
  margin-bottom: 4px;
  color: var(--mute);
  font: 500 13px/1.3 var(--sans);
  letter-spacing: 0;
}
.sw-a-card-coin { display: inline-block; margin-top: 6px; font-size: 13.5px; }
.sw-a-card-total { margin-top: 18px; font-size: 17px; font-variant-numeric: tabular-nums; }
.sw-a-card-total b { font-weight: 600; }
.sw-a-card-total span { margin-left: 4px; color: var(--faint); }
.sw-a-card .sw-lines { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.sw-a-act { display: grid; gap: 12px; margin-top: 24px; }
.sw-a-act:empty { display: none; }

.sw-a-share > * + * { margin-top: 14px; }
.sw-a-share-card {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
}
.sw-a-link { font-family: var(--mono); font-size: 13px; }

@media (max-width: 640px) {
  .sw-a-card { padding: 20px 18px 22px; }
  .sw-a-card-head h1 { font-size: 27px; }
  .sw-a-card-total { font-size: 16px; }
}

/* ------------------------------------------------------------------------------------------- history */

.sw-a-status { margin-bottom: 14px; }
.sw-a-status small {
  margin-left: 4px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.sw-a-history .sw-mini { min-width: 128px; }

/* ---------------------------------------------------------------------------------------------- coin */

.sw-a-coin-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sw-a-coin-id > div { min-width: 0; }
.sw-a-coin-id h1 { overflow-wrap: anywhere; }
.sw-page-title .sw-a-coin-id p { margin-top: 4px; font-size: 15px; }
.sw-a-coin-head > .sw-actions { grid-row: 1; align-self: center; }
.sw-a-mint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 18px; }
.sw-a-mint code { padding: 4px 8px; font-size: 12.5px; line-height: 1.5; }
.sw-page-title .sw-a-mint-note { margin-top: 8px; color: var(--faint); font-size: 13px; }

.sw-a-pool-table th.sw-a-group { padding-bottom: 7px; color: var(--mute); text-align: center; }

@media (max-width: 640px) {
  .sw-a-coin-head > .sw-actions { grid-row: auto; }
}