/*
 * token.css - the $PONBOND surface only. Every selector here is .tk- prefixed
 * so this sheet can never reach into the shell or into another surface.
 *
 * It loads after base.css, so a shared component (.card, .segmented,
 * .primary-action, .copy-button, .tag, details.disclosure) is inherited as
 * written and only extended below, never redeclared.
 *
 * Rules, same as everywhere else in this project:
 *   1. Colour comes from tokens.css. There is not one literal colour in here.
 *   2. Nothing is defined only inside a media query, so both themes hold.
 *   3. Mobile first. The breakpoints below only widen the layout.
 *
 * The lime accent is deliberately never used as text on a pale surface: it
 * measures 1.07:1 against the light page and would read as blank. It appears
 * here as a border, an outline and a fill under --accent-contrast, which is
 * how base.css uses it too.
 */

/* --------------------------------------------------------- page layout -- */

/*
 * The staking panel and the rewards panel are peers, not a main and a sidebar:
 * a visitor deciding whether to stake needs the "nothing has been distributed
 * yet" panel at least as much as the form. So they split evenly rather than
 * demoting one to a rail.
 */
.tk-grid {
  display: grid;
  gap: calc(var(--step) * 5);
  align-items: start;
}

/* Both tracks are minmax(0, 1fr): a bare 1fr floors at min-content, and one
 * long unbroken address string would then push the grid wider than the page. */
@media (min-width: 900px) {
  .tk-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: calc(var(--step) * 6);
  }
}

/* --------------------------------------------------- contract address -- */

.tk-contract {
  display: flex;
  flex-direction: column;
  gap: calc(var(--step) * 3);
}

/* .card's own `> * + *` rhythm is 16px, which is too airy for a three line
 * strip. The flex gap above governs instead. */
.tk-contract > * + * { margin-top: 0; }

.tk-contract-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--step) * 3);
  flex-wrap: wrap;
}

.tk-contract-label {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tk-contract-body {
  display: flex;
  align-items: center;
  gap: calc(var(--step) * 3);
  flex-wrap: wrap;
  padding: calc(var(--step) * 2.5) calc(var(--step) * 3);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--bg-sunken);
}

/*
 * `anywhere`, not `break-word`: a 42 character hex string has no break
 * opportunity of its own, and on a 360px screen the choice is between wrapping
 * mid-address and panning the whole page sideways.
 */
.tk-address {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  /* Selecting the address by hand is the fallback when the clipboard is
   * blocked, so make the text an obvious target rather than page furniture. */
  user-select: all;
}

/*
 * Not an address, so not monospace: the pending state should not look like
 * something a visitor could paste into a wallet.
 *
 * It keeps --text-primary rather than being dimmed. This line stands in for
 * the single most consequential string on the surface, and the italic sans at
 * a smaller size already tells a reader it is not something to paste into a
 * wallet. Dimming it as well would only cost legibility to say the same thing
 * twice: --text-subtle measures 2.6:1 on the light page, --text-muted 4.0:1.
 */
.tk-address.is-pending {
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: italic;
  color: var(--text-primary);
  user-select: auto;
}

.tk-copy { flex: none; }
.tk-copy:disabled { opacity: 0.45; }
.tk-copy:disabled:hover { color: var(--text-muted); border-color: var(--divider); }

.tk-contract-note {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ------------------------------------------------------- boost: shell -- */

.tk-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--step) * 3);
}

.tk-card-heading {
  display: flex;
  flex-direction: column;
  gap: calc(var(--step) * 0.5);
  min-width: 0;
}

.tk-block {
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.tk-block-group {
  display: flex;
  flex-direction: column;
  gap: calc(var(--step) * 2);
}

.tk-block-group > * + * { margin-top: 0; }

.tk-picker-note {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* ------------------------------------------------------ boost: fields -- */

.tk-field {
  display: flex;
  flex-direction: column;
  gap: calc(var(--step) * 2);
  min-width: 0;
}

.tk-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--step) * 3);
  flex-wrap: wrap;
}

.tk-field-label {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--step) * 2);
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 600;
}

/*
 * The optional field is marked three ways on purpose, because one of them is
 * always the wrong one for somebody: a word ("Optional"), a lighter label, and
 * a dashed rather than solid input box. Colour alone would fail anyone who
 * cannot see the difference.
 */
.tk-optional-tag {
  padding: 1px calc(var(--step) * 1.5);
  border: 1px dashed var(--divider-strong);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tk-field-optional .tk-field-label { color: var(--text-muted); font-weight: 500; }

.tk-balance {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--step) * 2);
  font-size: 12.5px;
  color: var(--text-muted);
  min-width: 0;
}

.tk-balance-label { white-space: nowrap; }

.tk-balance-value {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/*
 * Max measured 47x26 in the layout audit, under the 32px the audit treats as
 * the floor for a tap target. It is the one control on this panel that fills in
 * a money amount, so a near miss on a phone either does nothing or hits the
 * input beside it. The box grows to 32px and the label is centred inside it
 * rather than the type being scaled up, which would fight the balance line it
 * sits on.
 */
.tk-max {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: calc(var(--step) * 0.75) calc(var(--step) * 2.5);
  border: 1px solid var(--divider-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.tk-max:hover:not(:disabled) { border-color: var(--accent); }

/* Max is disabled whenever no balance has been read. That is the normal state
 * before deploy, so it has to look deliberate rather than broken. */
.tk-max:disabled { opacity: 0.4; }

.tk-input-row {
  display: flex;
  align-items: center;
  gap: calc(var(--step) * 2);
  padding: calc(var(--step) * 1.5) calc(var(--step) * 1.5) calc(var(--step) * 1.5) calc(var(--step) * 3.5);
  border: 1px solid var(--divider-strong);
  border-radius: var(--radius);
  background: var(--bg-sunken);
  transition: border-color 0.15s var(--ease);
  min-width: 0;
}

.tk-field-optional .tk-input-row {
  border-style: dashed;
  background: transparent;
}

.tk-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  padding-block: calc(var(--step) * 1.5);
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* The one place --text-subtle is still right: a placeholder that reads as
 * strongly as a value is a placeholder someone will try to stake. */
.tk-input::placeholder { color: var(--text-subtle); font-weight: 500; }

/*
 * The focus ring is moved from the input to the box that visually contains it,
 * so it wraps the field and its token chip instead of cutting between them.
 *
 * :focus-within, deliberately, and not :has(.tk-input:focus-visible). The
 * input's own outline is suppressed just above, so whatever draws the ring here
 * is the ONLY focus indicator this field has, and :focus-visible is a modality
 * heuristic that does not match in every path a field can be focused through
 * (a programmatic .focus() after a validation failure is the case measured
 * here: no match, and therefore no ring at all). A ring that also appears on a
 * pointer click is the ordinary behaviour for a text field. A ring that is
 * sometimes absent is a keyboard user with nowhere to look.
 */
.tk-input:focus,
.tk-input:focus-visible { outline: none; }

.tk-input-row:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

.tk-field.is-invalid .tk-input-row { border-color: var(--danger); }

.tk-chip {
  flex: none;
  padding: calc(var(--step) * 1.5) calc(var(--step) * 2.5);
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.tk-note {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.tk-note.is-error { color: var(--danger); }

/* An always-present empty paragraph would hold a permanent gap open under both
 * fields. Collapsing it keeps the resting layout tight. */
.tk-note:empty,
.tk-action-note:empty { display: none; }

.tk-optional-note {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ------------------------------------------------------ boost: action -- */

.tk-action-group {
  display: flex;
  flex-direction: column;
  gap: calc(var(--step) * 2.5);
}

.tk-action-group > * + * { margin-top: 0; }

/*
 * base.css paints .pending-note in --text-subtle and italicises it, which is
 * right for an aside. This is not an aside: it is the only explanation of why
 * the button above it will not do anything. Upright, and at body legibility.
 * Same for the rewards note, which explains why three figures are dashes.
 */
.tk-action-note,
.tk-rewards-note {
  color: var(--text-muted);
  font-style: normal;
}

/*
 * The action note carries two different things: the standing reason the button
 * is inert, and the message a click actually came back with. The second one is
 * the visitor's own failure and has to be told apart from the first at a
 * glance, so it takes --danger like the field notes do.
 *
 * Weight as well as colour, for the same reason .tk-optional-tag is marked
 * three ways: colour alone is not a signal everyone receives.
 */
.tk-action-note.is-error {
  color: var(--danger);
  font-weight: 500;
}

/* --------------------------------------------------------- rewards -- */

.tk-rewards {
  display: flex;
  flex-direction: column;
  gap: calc(var(--step) * 4);
}

.tk-rewards > * + * { margin-top: 0; }

.tk-rewards-facts {
  display: flex;
  flex-direction: column;
  gap: calc(var(--step) * 3);
  padding-top: calc(var(--step) * 3);
  border-top: 1px solid var(--divider);
}

.tk-rewards-facts p {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ------------------------------------------------------------- links -- */

/*
 * Stacked, not a row of three tiles. Measured at 1280: the rewards panel is
 * about 480px inside its padding, which leaves each of three tiles ~150px and
 * roughly 100px of text once the icon and padding are taken out. "Trade
 * PONBOND" then wraps onto two lines and its meta onto two more. A full width
 * row gives every label and every reason one line at every width, which is the
 * point of the meta line: it is where a disabled link says why.
 */
.tk-links {
  display: flex;
  flex-direction: column;
  gap: calc(var(--step) * 2);
}

.tk-link {
  display: flex;
  align-items: center;
  gap: calc(var(--step) * 2.5);
  padding: calc(var(--step) * 3);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  min-width: 0;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}

a.tk-link:hover {
  border-color: var(--text-subtle);
  background: var(--bg-sunken);
  color: var(--text-primary);
}

/*
 * A link with no honest destination. It is rendered as a span in the markup, so
 * it is already out of the tab order; this only has to make the state legible.
 * The meta line underneath carries the reason in words, since a dimmed tile on
 * its own does not say why.
 */
.tk-link.is-disabled {
  opacity: 0.55;
  cursor: default;
  border-style: dashed;
  background: transparent;
}

.tk-link-icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--text-subtle);
}

a.tk-link:hover .tk-link-icon { color: var(--accent); }

.tk-link-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.tk-link-label {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

/* This line is where a disabled link states its reason, so it is held to the
 * same legibility as body copy rather than dimmed into decoration. */
.tk-link-meta {
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------- disclosure -- */

/* base.css spaces the first paragraph off the summary. This only has to space
 * the three paragraphs from each other. */
.tk-how > p + p { margin-top: calc(var(--step) * 2.5); }

/* ------------------------------------------------------ breakpoints -- */

/*
 * 360px class. The contract strip is the only element here that genuinely runs
 * out of room: an address plus a copy button cannot share a line at this width
 * without one of them being truncated, and a truncated address is a hazard.
 */
@media (max-width: 439px) {
  .tk-contract-body {
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--step) * 2.5);
  }

  .tk-copy { align-self: flex-start; }

  .tk-field-head {
    align-items: flex-start;
    flex-direction: column;
    gap: calc(var(--step) * 1.5);
  }

  .tk-input { font-size: 16px; }
}

/* Two panels sit side by side from here, so their internals can breathe. */
@media (min-width: 900px) {
  .tk-input { font-size: 18px; }
}

/* Pointer-coarse devices keep the hover states from sticking after a tap. */
@media (hover: none) {
  a.tk-link:hover { background: var(--bg-elevated); border-color: var(--divider); }
  a.tk-link:hover .tk-link-icon { color: var(--text-subtle); }
  .tk-max:hover:not(:disabled) { border-color: var(--divider-strong); }
}