/* Zenith LP Bot: tools page stylesheet.
   Pass T1: tools-intro (plain headline) + tool-panel shell (reused by
   all three panels) + pool explorer (form, chain segmented control,
   result rows, status/error/loading states).
   Loaded after styles.css: reuses its tokens, .section-heading,
   .cta-pill/.cta-dot, .visually-hidden and page-max-width conventions,
   only adding what those don't already cover. */

/* ---------------------------------------------------------------- */
/* Tools intro: plain headline + one lead sentence                   */
/* ---------------------------------------------------------------- */

.tools-intro {
  padding: clamp(48px, 8vw, 96px) 24px 0;
}

.tools-intro-inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
}

.tools-headline {
  font-weight: var(--font-weight-medium);
  font-size: clamp(36px, 6vw + 16px, var(--text-heading-lg));
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  margin: 0 0 20px;
}

.tools-lead {
  font-size: clamp(18px, 1.6vw + 12px, 20px);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body-lg);
  max-width: 60ch;
  margin: 0;
}

/* ---------------------------------------------------------------- */
/* Tool panel shell, shared by pool explorer, calculator, position   */
/* viewer: one elevated white surface, same family as pricing and    */
/* referral on the landing page.                                     */
/* ---------------------------------------------------------------- */

.tool-panel {
  padding: var(--section-gap) 24px;
}

.tool-panel-inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
}

.tool-panel-surface {
  background: var(--color-pure-white);
  border-radius: var(--radius-cards);
  padding: clamp(32px, 6vw, 72px) clamp(24px, 6vw, 64px);
}

.tool-panel-lead {
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body-lg);
  max-width: 60ch;
  margin: 16px 0 0;
}

/* Panel heading: motif + h2 on one line, stacked at mobile. Each motif
   is a small flat, outlined, paper-cut diagram (no human figures) that
   explains what the panel does, echoing the landing page's fee-divide
   diagram language. */
.tool-panel-heading {
  display: flex;
  align-items: center;
  gap: var(--spacing-20);
}

.tool-motif {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
}

@media (max-width: 480px) {
  .tool-panel-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ---------------------------------------------------------------- */
/* Shared secondary action button: Explore / Load / View position(s). */
/* One family with .cta-pill (radius, border, white fill, hover lift):*/
/* this modifier only adds the padding/type that makes the button read*/
/* the same rendered height as the .pool-input it sits beside, so     */
/* input + button compose as one row. Border-color shifts to ink on   */
/* hover (the primary "Open in Telegram" family does not). Full width */
/* below its input at <=480px falls out of .pool-form-row's existing  */
/* <=560px column stack + align-items:stretch, no extra rule needed.  */
/* ---------------------------------------------------------------- */

.tool-cta-secondary {
  justify-content: center;
  padding: 14px 24px;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.tool-cta-secondary:hover {
  border-color: var(--color-ink-black);
}

/* ---------------------------------------------------------------- */
/* Pool explorer: form                                                */
/* ---------------------------------------------------------------- */

.pool-form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 0;
}

.pool-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 20px;
  border: 1px solid var(--color-hairline-mist);
  border-radius: var(--radius-buttons);
  background: var(--color-cream-paper);
  font: inherit;
  font-size: var(--text-body-sm);
  color: var(--color-ink-black);
}

.pool-input::placeholder {
  /* stone-gray on cream-paper is ~3.4:1, under the 4.5:1 body-text floor.
     ink-black matches how every other secondary/meta label on this page
     is already colored (nothing else uses stone-gray for text). */
  color: var(--color-ink-black);
}

.pool-input:focus-visible {
  outline: 2px solid var(--color-ink-black);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .pool-form-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Chain segmented control: real radio inputs, visually hidden but
   still focusable, so keyboard nav and screen readers get native
   radiogroup behaviour for free instead of hand-rolled ARIA state. */
.chain-select {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  border: none;
}

.chain-option {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.chain-option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.chain-option span {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--color-hairline-mist);
  border-radius: var(--radius-buttons);
  background: var(--color-cream-paper);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  transition: border-color 0.15s ease-out, background 0.15s ease-out;
}

.chain-option input:checked + span {
  border-color: var(--color-ink-black);
  background: var(--color-sandstone);
}

.chain-option input:not(:checked) + span:hover {
  background: var(--color-pure-white);
}

.chain-option input:focus-visible + span {
  outline: 2px solid var(--color-ink-black);
  outline-offset: 3px;
}

/* Touch targets: chips, chain-select options (incl. the mode tabs that
   reuse .chain-option) grow to a 44px-tall tap area on small screens.
   min-height is a floor under the padding bump, not a fixed box, so a chip
   never grows wider than its own text needs and rows still wrap normally. */
@media (max-width: 560px) {
  .chain-option span,
  .calc-chip span {
    min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

.pool-error {
  margin: 16px 0 0;
  font-size: var(--text-body-sm);
  /* coral-pop on white is ~2.7:1, under the 4.5:1 body-text floor. Same
     hue, darkened enough to clear it (~5.1:1). */
  color: #c83c2d;
}

/* ---------------------------------------------------------------- */
/* Pool explorer: status line + loading pulse                        */
/* ---------------------------------------------------------------- */

.pool-status {
  margin: 24px 0 0;
  font-size: var(--text-body-sm);
  color: var(--color-ink-black);
}

.pool-status.is-loading,
.calc-status.is-loading {
  animation: pool-pulse 1.4s ease-in-out infinite;
}

@keyframes pool-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.pool-retry {
  margin-left: 8px;
  padding: 8px 8px 8px 16px;
  font-size: var(--text-body-sm);
  cursor: pointer;
}

/* ---------------------------------------------------------------- */
/* Pool explorer: result rows                                        */
/* ---------------------------------------------------------------- */

/* Market-overview strip: aggregates the same search results the list below
   renders, in the .stat-tile component shared with the landing page's
   #stats section (styles.css). Sits between the status line and the list
   so it reads as a summary of what follows. */
.pool-overview {
  margin: 20px 0 0;
}

.pool-overview[hidden] {
  display: none;
}

.pool-results {
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pool-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 16px 20px;
  border: 1px solid var(--color-hairline-mist);
  border-radius: var(--radius-2xl);
  background: var(--color-cream-paper);
}

/* Same specificity-tie fix as .calc-strategy-params[hidden] elsewhere in
   this file: .pool-row's own display:flex otherwise wins over [hidden] for
   rows beyond the first 6, collapsed behind "Show all N pools". */
.pool-row[hidden] {
  display: none;
}

.pool-row-main {
  min-width: 0;
}

.pool-row-title {
  margin: 0 0 4px;
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-medium);
  overflow-wrap: break-word;
}

.pool-row-meta {
  margin: 0;
  font-size: var(--text-body-sm);
  color: var(--color-ink-black);
}

.pool-row-cta {
  flex: 0 0 auto;
  padding: 10px 10px 10px 18px;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
}

/* Quiet text link, deliberately understated next to the CTA pill. */
.pool-row-use-link {
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-body-sm);
  color: var(--color-ink-black);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Shared quiet text-button affordance: no pill, no border, just underlined
   text. Used by disclosure toggles that reveal more content in place (pool
   explorer's "Show all N pools", the calculator's "More options") — same
   family as .pool-row-use-link above, pulled into its own class since
   neither toggle lives inside a pool row. No margin here: the two use sites
   sit in different layout contexts (one plain block flow, one flex column
   with its own `gap`), so spacing is set per placement below instead of
   risking a doubled gap in the flex context. */
.quiet-toggle-btn {
  align-self: flex-start;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-body-sm);
  color: var(--color-ink-black);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

#pool-show-all {
  margin: 16px 0 0;
}

.pool-explainer {
  margin: 12px 0 0;
  font-size: var(--text-body-sm);
  color: var(--color-ink-black);
}

/* ---------------------------------------------------------------- */
/* Range calculator: shared form primitives                          */
/* ---------------------------------------------------------------- */

.calc-form {
  margin: 32px 0 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.calc-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.calc-fieldset[disabled] {
  opacity: 0.5;
}

/* Chrome does not treat <legend> as a flex-gap participant, so the
   fieldset's own `gap: 16px` (below) never applies between the legend and
   its first sibling, collapsing that one gap to 0. Margin on the legend
   itself restores it without touching the (unaffected) gaps between the
   fieldset's other children. */
.calc-legend {
  padding: 0;
  margin: 0 0 16px;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
}

/* .chain-select's own margin-top: 16px (below) is meant for contexts
   without a flex `gap`. Directly after a .calc-legend, the fieldset's own
   16px gap already applies (it's a normal flex child, unlike the legend
   itself), so this .chain-select's inherited margin would stack on top of
   it — 32px instead of 16px. Same reasoning .calc-mode-select already
   applies to the second chain-select in this fieldset, just for the first. */
.calc-legend + .chain-select {
  margin-top: 0;
}

.calc-mode-select {
  margin: 0;
}

.calc-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.calc-field {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calc-field label {
  font-size: var(--text-body-sm);
  color: var(--color-ink-black);
}

.calc-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-hairline-mist);
  border-radius: var(--radius-buttons);
  background: var(--color-cream-paper);
  font: inherit;
  font-size: var(--text-body-sm);
  color: var(--color-ink-black);
}

.calc-input:focus-visible {
  outline: 2px solid var(--color-ink-black);
  outline-offset: 3px;
}

/* Remove native number spinners cross-browser: they don't match this
   input's pill skin and add nothing on a field that's usually typed, not
   stepped. */
input[type="number"] {
  appearance: none;
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calc-status {
  margin: 16px 0 0;
  font-size: var(--text-body-sm);
  color: var(--color-ink-black);
}

.calc-source-manual .calc-field-row {
  margin: 0;
}

.calc-error {
  margin: 0;
  font-size: var(--text-body-sm);
  /* coral-pop on white is ~2.7:1, under the 4.5:1 body-text floor. Same
     hue, darkened enough to clear it (~5.1:1). */
  color: #c83c2d;
}

/* ---------------------------------------------------------------- */
/* Range calculator: strategy chips (real radios, chat-chip skin)    */
/* ---------------------------------------------------------------- */

.calc-chips {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.calc-chip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.calc-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.calc-chip span {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--color-hairline-mist);
  border-radius: var(--radius-buttons);
  background: var(--color-cream-paper);
  font-size: 13px;
  transition: border-color 0.15s ease-out, background 0.15s ease-out;
}

.calc-chip input:checked + span {
  border-color: var(--color-ink-black);
  background: var(--color-sandstone);
  font-weight: var(--font-weight-medium);
}

.calc-chip input:not(:checked) + span:hover {
  background: var(--color-pure-white);
}

.calc-chip input:focus-visible + span {
  outline: 2px solid var(--color-ink-black);
  outline-offset: 3px;
}

.calc-strategy-params {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* .calc-field's flex-basis:200px (below) is a preferred min-WIDTH for the
   .calc-field-row context it was designed for. custom-pct-params and
   one-sided-params drop a lone .calc-field straight into this column flex
   container instead, where flex-basis sets the MAIN axis (height) size —
   forcing a 200px-tall box no matter how short the actual field is. Reset
   the basis so height stays content-driven, closing the dead gap above
   the Deposit block. */
.calc-strategy-params > .calc-field {
  flex: 0 1 auto;
}

/* [hidden] and .calc-strategy-params both have one-selector specificity, so
   the later author rule above would otherwise win and keep a "hidden"
   params block visible as an empty flex box. */
.calc-strategy-params[hidden] {
  display: none;
}

/* Same fix: calc.js hides this one (chain-select's shared display:flex
   otherwise wins over [hidden] for the same specificity-tie reason above). */
#calc-deposit-token-select[hidden] {
  display: none;
}

/* Same fix again: .calc-chips's own display:flex otherwise wins over
   [hidden] on the collapsed "More options" strategy row. */
#calc-strategy-chips-more[hidden] {
  display: none;
}

/* This note sits as a direct child of #calc-strategy-fieldset's flex column
   (gap: 16px already spaces it from its neighbours), so .calc-note's own
   top margin below would stack on top of that gap instead of replacing it. */
.calc-strategy-hint {
  margin-top: 0;
}

/* ---------------------------------------------------------------- */
/* Range calculator: results                                         */
/* ---------------------------------------------------------------- */

.calc-results {
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.calc-results-empty {
  margin: 0;
  font-size: var(--text-body-sm);
  color: var(--color-ink-black);
}

.calc-block {
  padding: 20px;
  border: 1px solid var(--color-hairline-mist);
  border-radius: var(--radius-2xl);
  background: var(--color-cream-paper);
}

.calc-block-title {
  margin: 0 0 12px;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
}

.calc-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: var(--radius-buttons);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  vertical-align: middle;
}

.calc-badge--in {
  background: var(--color-fresh-grass);
  color: var(--color-ink-black);
}

.calc-badge--out {
  background: var(--color-sandstone);
  color: var(--color-ink-black);
}

.calc-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px 20px;
}

.calc-grid dt {
  margin: 0 0 2px;
  font-size: 12px;
  color: var(--color-ink-black);
}

.calc-grid dd {
  margin: 0;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
}

.calc-note {
  margin: 12px 0 0;
  font-size: var(--text-body-sm);
  color: var(--color-ink-black);
}

.calc-warning {
  margin: 12px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--color-ink-black);
  border-radius: var(--radius-small);
  font-size: var(--text-body-sm);
}

@media (max-width: 560px) {
  .calc-field-row {
    flex-direction: column;
  }

  /* Same fix as .calc-strategy-params > .calc-field above: flipping this
     row to a column here turns .calc-field's flex-basis:200px (a preferred
     min-WIDTH for the row layout) into a forced 200px-tall box instead. */
  .calc-field-row > .calc-field {
    flex: 0 1 auto;
  }
}

/* ---------------------------------------------------------------- */
/* Position viewer: mode segmented control reuses .chain-select. Each */
/* lookup form reuses .pool-form-row/.pool-input/.chain-select. Result */
/* cards reuse .pool-row (title/meta/cta family) + .calc-grid/.calc-note */
/* /.calc-badge from the calculator, stacked instead of single-line.   */
/* ---------------------------------------------------------------- */

.pos-mode-select {
  margin: 32px 0 0;
}

.pos-form {
  margin: 20px 0 0;
}

.pos-card {
  flex-direction: column;
  align-items: stretch;
  /* .pool-row's flex-wrap:wrap is for its row layout (title wrapping under
     the CTA at narrow widths). Left on here it turns this single-column
     stack into a multi-line flex container, which inflates .pool-row-main's
     auto height well past its actual content at desktop widths (Chrome's
     column-flex line-sizing), opening a dead gap above the CTA pill. This
     card only ever has two items in one column, so it never needs to wrap. */
  flex-wrap: nowrap;
}

.pos-card .pool-row-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pos-card .calc-grid {
  margin: 12px 0 0;
}

.pos-card .pool-row-cta {
  align-self: flex-start;
  margin-top: 16px;
}

.pos-card-failed {
  padding: 16px 20px;
  border: 1px solid var(--color-hairline-mist);
  border-radius: var(--radius-2xl);
  background: var(--color-cream-paper);
  font-size: var(--text-body-sm);
}

.pos-range {
  margin: 16px 0 0;
}

.pos-range-track {
  position: relative;
  height: 8px;
  border-radius: var(--radius-buttons);
  background: var(--color-sandstone);
}

.pos-range-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  max-width: 100%;
  border-radius: var(--radius-buttons);
  background: var(--color-fresh-grass);
  transform-origin: left;
  animation: pos-range-fill-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pos-range-fill-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.pos-range-marker {
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 16px;
  margin-left: -1.5px;
  background: var(--color-ink-black);
  transform: translateY(-50%);
  animation: pos-marker-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

@keyframes pos-marker-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.pos-range-labels {
  margin: 8px 0 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--color-ink-black);
}

.pos-honest-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border: 1px solid var(--color-hairline-mist);
  border-radius: var(--radius-2xl);
}

.pos-honest-line .calc-note {
  margin: 0;
  flex: 1 1 240px;
}

/* ---------------------------------------------------------------- */
/* Result row/card insertion: gentle stagger-in, race-proof. Absence  */
/* of the class is the resting, fully-visible state (no base opacity  */
/* rule on .pool-row/.calc-block/.pos-card-failed/.pos-honest-line),  */
/* so a row is only ever hidden for the instant the JS-added class    */
/* below explicitly asks for it via animation-fill-mode:both, never   */
/* by a stylesheet default a script might fail to reverse. */
.row-reveal {
  animation: row-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}

@keyframes row-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .row-reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .pos-range-fill {
    animation: none !important;
    transform: none !important;
  }

  .pos-range-marker {
    animation: none !important;
    opacity: 1 !important;
  }
}