/*
 * The names site's own layer, on top of shared-ui. What a visitor meets, in
 * order:
 *
 *   1. The field: what you type, set in display type with the .pkl beside it,
 *      sized to fit the line, answered by the chain in the verdict under it.
 *   2. The card: the name as it would be held - resolves to, held until - and
 *      its plate, the name encoded six bits a character, a column per letter.
 *      Beside it the order: the price in dollars first for 1 to 10 years.
 *   3. The live wall of names registered on the chain.
 *
 * One orchestrated moment: registering sweeps the plate while the transaction
 * is out and stamps the card when it lands. Every animation sits behind
 * prefers-reduced-motion: no-preference, and nothing hidden depends on one.
 * Sizes that depend on the name (the field's type, the plate's columns) are
 * custom properties app.js sets through the CSSOM: no style attribute anywhere.
 */

.ex-wrap.app.nm {
  width: min(100%, 72rem);
  padding-top: var(--pickle-space-7);
}

.nm .mono { font-family: var(--pickle-font-mono); }
.nm-muted { color: var(--pickle-subtle); }
.nm .ex-lede .mono { overflow-wrap: anywhere; }

/* ===================================================================== hero */

.nm-hero { margin: 0; }

.nm-h {
  max-width: 34ch;
  margin: 0 0 var(--pickle-space-6);
  color: var(--pickle-muted);
  font-family: var(--pickle-font-display);
  font-size: var(--pickle-text-xl);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--pickle-tracking-tight);
}

.nm-h .mono { color: var(--pickle-text); font-size: .92em; }

.nm-field { container-type: inline-size; }

.nm-label {
  display: block;
  margin: 0 0 var(--pickle-space-2);
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* The line the name is set on. Its size follows the name: app.js sets
 * --nm-chars to the characters on show (never fewer than twelve), and the type
 * scales so they fit the column, down to a floor past which the field
 * scrolls its own text instead. */
.nm-line {
  display: flex;
  align-items: baseline;
  min-width: 0;
  padding: 0 0 var(--pickle-space-2);
  font-family: var(--pickle-font-display);
  font-size: max(1.5rem, min(8.5rem, calc(100cqi / var(--nm-chars, 12) * 1.8)));
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.045em;
  border-bottom: 2px solid var(--pickle-line);
  transition: border-color var(--pickle-base) var(--pickle-ease);
}

.nm-line:focus-within { border-bottom-color: var(--pickle-mint); }

/* Keyboard focus is the underline turning mint and thickening: the line IS
 * the control, and a box drawn round type this size read as a selection. */
.nm-line:has(.nm-input:focus-visible) {
  padding-bottom: calc(var(--pickle-space-2) - 2px);
  border-bottom-width: 4px;
}

.nm-grow {
  position: relative;
  display: inline-block;
  min-width: .5em;
  max-width: calc(100% - 2.05em);
  overflow: hidden;
}

/* The sizer is the only thing with a width: the typed text (or the
 * placeholder) in the same face, invisible. The input lies over it. An
 * input's own intrinsic width follows the font's widest glyph times its size
 * attribute, which at this size held the line open far behind "jules". */
.nm-sizer {
  display: block;
  padding-right: .02em;
  visibility: hidden;
  white-space: pre;
}

.nm-input {
  position: absolute;
  inset: 0;
  width: 100%;
  min-width: 0;
  padding: 0;
  color: var(--pickle-text);
  font: inherit;
  letter-spacing: inherit;
  caret-color: var(--pickle-mint);
  background: transparent;
  border: 0;
  outline: none;
}

.nm-input::placeholder { color: var(--pickle-faint); opacity: 1; }

.nm-tld {
  flex: 0 0 auto;
  color: var(--pickle-accent-text);
  white-space: nowrap;
}

/* The chain's answer, one line: a dot, a verdict, the reason. */
.nm-verdict {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-1) var(--pickle-space-3);
  align-items: baseline;
  min-height: 3.2em;
  margin: var(--pickle-space-4) 0 0;
  color: var(--pickle-muted);
  font-size: var(--pickle-text-md);
}

.nm-verdict b {
  color: var(--pickle-text);
  font-weight: 600;
}

.nm-dot {
  flex: 0 0 auto;
  width: .6rem;
  height: .6rem;
  background: var(--pickle-subtle);
  border-radius: 50%;
  transform: translateY(-.05rem);
}

[data-level="free"] .nm-dot { background: var(--pickle-mint); }
[data-level="free"] .nm-verdict b { color: var(--pickle-accent-text); }
[data-level="taken"] .nm-dot { background: var(--pickle-muted); }
[data-level="reserved"] .nm-dot { background: var(--pickle-amber); }
[data-level="reserved"] .nm-verdict b { color: var(--pickle-amber); }
[data-level="err"] .nm-dot { background: var(--pickle-rose); }
[data-level="err"] .nm-verdict b { color: var(--pickle-rose); }
[data-level="err"] .nm-line { border-bottom-color: var(--pickle-rose-line); }
[data-level="checking"] .nm-dot { background: var(--pickle-mint-dim); }

/* The three yearly rates. The one the typed name falls in lights up. */
.nm-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: var(--pickle-space-5) 0 0;
  padding: 0;
  list-style: none;
  background: var(--pickle-line);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  overflow: clip;
}

.nm-tiers li {
  display: grid;
  gap: 2px;
  padding: var(--pickle-space-3) var(--pickle-space-4);
  background: var(--pickle-bg);
  border-top: 2px solid transparent;
  transition: background var(--pickle-base) var(--pickle-ease), border-color var(--pickle-base) var(--pickle-ease);
}

.nm-tiers span,
.nm-tiers em {
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  font-style: normal;
  letter-spacing: .08em;
}

.nm-tiers span { text-transform: uppercase; letter-spacing: .16em; }
.nm-tiers em { letter-spacing: 0; }

.nm-tiers b {
  color: var(--pickle-text);
  font-size: var(--pickle-text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.nm-tiers li.on {
  background: var(--pickle-mint-soft);
  border-top-color: var(--pickle-mint);
}

.nm-tiers li.on b { color: var(--pickle-accent-text); }

/* ============================================================ card and order */

.nm-deal,
.nm-namehead {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: var(--pickle-space-5);
  margin: var(--pickle-space-6) 0 0;
}

.nm-namehead { margin-top: var(--pickle-space-3); }

.nm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--pickle-space-4);
  min-width: 0;
  min-height: 20rem;
  padding: var(--pickle-space-6);
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-top: 2px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  overflow: clip;
  transition: border-color var(--pickle-slow) var(--pickle-ease);
}

.nm-card.free,
.nm-card.held,
.nm-card.minted { border-top-color: var(--pickle-mint); }
.nm-card.reserved { border-top-color: var(--pickle-amber); }
.nm-card.bad { border-top-color: var(--pickle-rose-line); }
.nm-card.taken { border-top-color: var(--pickle-muted); }
.nm-card.sending { border-top-color: var(--pickle-mint-hi); }

.nm-card-top,
.nm-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-1) var(--pickle-space-4);
  justify-content: space-between;
  margin: 0;
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.nm-card-foot { margin-top: calc(var(--pickle-space-2) * -1); letter-spacing: .1em; }

.nm-card-name {
  margin: auto 0 0;
  font-family: var(--pickle-font-display);
  font-size: clamp(1.9rem, 4.6vw, 3.9rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}

.nm-card.idle .nm-card-name b { color: var(--pickle-faint); }
.nm-card-name span { color: var(--pickle-accent-text); }
.nm-card.taken .nm-card-name span { color: var(--pickle-muted); }
.nm-card.reserved .nm-card-name span { color: var(--pickle-amber); }
.nm-card.bad .nm-card-name span { color: var(--pickle-rose); }

.nm-card-kv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pickle-space-3);
  margin: 0;
}

.nm-card-kv dt,
.nm-kv dt,
.nm-done-kv dt {
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.nm-card-kv dd {
  margin: 2px 0 0;
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-sm);
}

.nm-card-plate {
  padding: var(--pickle-space-3) 0 0;
  border-top: 1px solid var(--pickle-line);
}

/* The plate: the name, a column per character, six bits each, top bit first. */
.nm-plate {
  --cell: 12px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(6, var(--cell));
  grid-auto-columns: minmax(0, var(--cell));
  gap: 3px;
  width: max-content;
  max-width: 100%;
}

.nm-plate i {
  display: block;
  background: rgb(255 255 255 / 7%);
  border-radius: 1px;
}

.nm-plate i.on { background: var(--pickle-mint); }
.nm-card.idle .nm-plate i.on { background: rgb(0 231 136 / 28%); }
.nm-card.taken .nm-plate i.on { background: var(--pickle-muted); }
.nm-card.reserved .nm-plate i.on { background: var(--pickle-amber); }
.nm-card.bad .nm-plate i.on { background: var(--pickle-rose-line); }

.nm-plate.sm {
  --cell: 4px;
  gap: 1px;
}

/* The profile picture, when a name has one: served by the explorer from this
 * origin (app.js avatarSrc), and swapped back for the plate if it fails. */
.nm-avatar {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: cover;
  background: var(--pickle-surface-2);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}

.nm-avatar.md { width: 56px; height: 56px; flex: 0 0 auto; }
.nm-avatar.lg { width: 96px; height: 96px; }

.nm-ident {
  display: flex;
  gap: var(--pickle-space-4);
  align-items: center;
  min-width: 0;
}

.nm-ident .nm-name-h { margin: 0; min-width: 0; }
.nm-ident + .nm-bio,
.nm-ident + .nm-kv { margin-top: var(--pickle-space-4); }

/* A stamp, pressed on when the name is yours. */
.nm-stamp {
  position: absolute;
  right: var(--pickle-space-6);
  bottom: 3.6rem;
  padding: .3rem .8rem;
  color: var(--pickle-accent-text);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-lg);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  border: 2px solid currentColor;
  border-radius: var(--pickle-radius);
  opacity: 0;
  transform: rotate(-8deg);
  pointer-events: none;
}

.nm-card.minted .nm-stamp { opacity: 1; }
.nm-card.held .nm-stamp { color: var(--pickle-muted); opacity: .8; }

/* A registration in flight: a bright band runs across the card. */
.nm-card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 18%;
  background: linear-gradient(90deg, transparent, rgb(125 255 191 / 10%), transparent);
  opacity: 0;
  pointer-events: none;
}

.nm-card.sending::after { opacity: 1; }

.nm-order,
.nm-panel {
  min-width: 0;
  padding: var(--pickle-space-6);
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}

.nm-o-k {
  margin: 0 0 var(--pickle-space-2);
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.nm-price {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-1) var(--pickle-space-3);
  align-items: baseline;
  margin: 0;
}

.nm-price b {
  font-family: var(--pickle-font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.nm-price span {
  color: var(--pickle-muted);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-sm);
}

.nm-o-sub {
  margin: var(--pickle-space-3) 0 0;
  color: var(--pickle-muted);
  font-size: var(--pickle-text-sm);
  line-height: 1.55;
}

.nm-years { margin: var(--pickle-space-5) 0 0; }

.nm-years-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 var(--pickle-space-2);
}

.nm-years-head label {
  margin: 0;
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.nm-years-head output {
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-sm);
  font-variant-numeric: tabular-nums;
}

/* The years slider: a hairline track, a square mint thumb. */
.nm-range {
  display: block;
  width: 100%;
  height: var(--pickle-tap);
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.nm-range::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--pickle-line);
}

.nm-range::-moz-range-track {
  height: 2px;
  background: var(--pickle-line);
}

.nm-range::-moz-range-progress {
  height: 2px;
  background: var(--pickle-mint);
}

.nm-range::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -8px;
  background: var(--pickle-mint);
  border: 0;
  border-radius: var(--pickle-radius);
  appearance: none;
}

.nm-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--pickle-mint);
  border: 0;
  border-radius: var(--pickle-radius);
}

.nm-range:focus-visible {
  outline: 2px solid var(--pickle-focus);
  outline-offset: 2px;
}

.nm-range:disabled { opacity: .45; cursor: default; }

/* Inside a form, the shared input box must not reach the slider. */
.ex-form input.nm-range {
  min-height: var(--pickle-tap);
  padding: 0;
  background: transparent;
  border: 0;
}

.nm-ticks {
  display: flex;
  justify-content: space-between;
  margin: -6px 0 0;
  padding: 0 5px;
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
}

.nm-go {
  width: 100%;
  margin: var(--pickle-space-5) 0 0;
  min-height: 3.25rem;
  font-size: var(--pickle-text-md);
}

.nm-go-hint {
  min-height: 1.4em;
  margin: var(--pickle-space-3) 0 0;
  color: var(--pickle-subtle);
  font-size: var(--pickle-text-sm);
  line-height: 1.5;
}

.nm-order .ex-out { margin-top: var(--pickle-space-4); }

.nm-held {
  margin: 0;
  font-size: var(--pickle-text-xl);
  line-height: 1.35;
}

.nm-held b { color: var(--pickle-accent-text); }

.nm-near { margin: var(--pickle-space-5) 0 var(--pickle-space-4); }

.nm-near-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-2);
}

.nm-near-btn {
  min-height: var(--pickle-tap);
  padding: 0 var(--pickle-space-4);
  color: var(--pickle-text);
  font-family: var(--pickle-font-display);
  font-size: var(--pickle-text-md);
  font-weight: 600;
  cursor: pointer;
  background: var(--pickle-bg);
  border: 1px solid var(--pickle-mint-line);
  border-radius: var(--pickle-radius);
}

.nm-near-btn span { color: var(--pickle-accent-text); }
.nm-near-btn:hover { background: var(--pickle-mint-soft); }

#held .ex-actions { margin: var(--pickle-space-5) 0 0; }

/* The receipt a registration prints in place of the order. */
.nm-done-h {
  margin: 0 0 var(--pickle-space-4);
  font-family: var(--pickle-font-display);
  font-size: var(--pickle-text-3xl);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

.nm-done-h:focus { outline: none; }
.nm-done-h span { color: var(--pickle-accent-text); }

.nm-done-kv {
  display: grid;
  gap: 0;
  margin: 0 0 var(--pickle-space-4);
}

.nm-done-kv div,
.nm-kv div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--pickle-space-3);
  align-items: baseline;
  padding: var(--pickle-space-3) 0;
  border-bottom: 1px solid var(--pickle-line);
}

.nm-done-kv dd,
.nm-kv dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.nm-done-kv a,
.nm-kv a { color: var(--pickle-accent-text); }

.nm-done-note {
  margin: 0 0 var(--pickle-space-5);
  color: var(--pickle-muted);
  line-height: 1.6;
}

.nm-done-note b { color: var(--pickle-text); }

/* ===================================================================== wall */

.nm-wall { margin: var(--pickle-section-sm) 0 0; }

.nm-wall-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-2) var(--pickle-space-5);
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 var(--pickle-space-4);
}

.nm-wall-h,
.nm-sec-h {
  display: flex;
  gap: var(--pickle-space-3);
  align-items: center;
  margin: 0;
  font-family: var(--pickle-font-display);
  font-size: var(--pickle-text-2xl);
  font-weight: 600;
  letter-spacing: -.03em;
}

.nm-live {
  width: .55rem;
  height: .55rem;
  background: var(--pickle-mint);
  border-radius: 50%;
}

.nm-wall-meta {
  margin: 0;
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-xs);
}

.nm-wall-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
  gap: var(--pickle-space-2);
  min-height: 5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nm-chip a {
  display: grid;
  gap: var(--pickle-space-3);
  height: 100%;
  padding: var(--pickle-space-4);
  color: var(--pickle-text);
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  transition: border-color var(--pickle-fast) var(--pickle-ease), background var(--pickle-fast) var(--pickle-ease);
}

.nm-chip a:hover {
  background: var(--pickle-surface-2);
  border-color: var(--pickle-mint-line);
}

.nm-chip a:focus-visible {
  outline: 2px solid var(--pickle-focus);
  outline-offset: 2px;
}

.nm-chip.newest a { border-top: 2px solid var(--pickle-mint); }

.nm-chip-name {
  font-family: var(--pickle-font-display);
  font-size: var(--pickle-text-xl);
  font-weight: 600;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}

.nm-chip-name span { color: var(--pickle-accent-text); }

.nm-chip-meta {
  display: flex;
  gap: var(--pickle-space-3);
  justify-content: space-between;
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
}

.nm-wall-empty {
  grid-column: 1 / -1;
  padding: var(--pickle-space-5);
  color: var(--pickle-muted);
  background: var(--pickle-surface-1);
  border: 1px dashed var(--pickle-line);
  border-radius: var(--pickle-radius);
}

/* ==================================================================== facts */

.nm-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: var(--pickle-section-sm) 0 0;
  background: var(--pickle-line);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  overflow: clip;
}

.nm-facts div {
  display: grid;
  align-content: start;
  gap: var(--pickle-space-2);
  padding: var(--pickle-space-5);
  background: var(--pickle-bg);
}

.nm-facts b { font-weight: 600; }

.nm-facts span {
  color: var(--pickle-muted);
  font-size: var(--pickle-text-sm);
  line-height: 1.55;
}

/* ================================================================ one name */

.nm-name-h,
.nm-me-h {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-3);
  align-items: baseline;
  margin: 0 0 var(--pickle-space-4);
  font-family: var(--pickle-font-display);
  font-size: var(--pickle-text-3xl);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}

.nm-me-h { font-size: var(--pickle-text-display); }

.nm-name-h > span,
.nm-me-h > span { margin-left: calc(var(--pickle-space-3) * -1); color: var(--pickle-accent-text); }

.nm-name-h .ex-copy { align-self: center; }

.nm-bio {
  margin: 0 0 var(--pickle-space-4);
  color: var(--pickle-muted);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.nm-kv { margin: 0; }
.nm-kv dd.mono { font-size: var(--pickle-text-sm); }

.nm-manage { margin: var(--pickle-section-sm) 0 0; }
.nm-manage .nm-sec-h { margin-bottom: var(--pickle-space-3); }

.nm-role {
  margin: 0 0 var(--pickle-space-5);
  color: var(--pickle-muted);
}

.nm-role.mine { color: var(--pickle-accent-text); }

.nm-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pickle-space-4);
  margin: 0 0 var(--pickle-space-4);
}

.nm-tool {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: var(--pickle-space-5);
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}

.nm-tool > p,
.nm-tool .nm-tool-grid,
.nm-tool .nm-range { width: 100%; }

.nm-tool.wide { grid-column: 1 / -1; }

.nm-tool h3 {
  margin: 0 0 var(--pickle-space-1);
  font-size: var(--pickle-text-lg);
  font-weight: 600;
}

.nm-tool .nm-tool-for {
  margin: 0 0 var(--pickle-space-4);
  color: var(--pickle-muted);
  font-size: var(--pickle-text-sm);
  line-height: 1.5;
}

.nm-tool .ex-btn { margin-top: auto; }

.nm-tool .nm-tool-sum {
  margin: var(--pickle-space-2) 0 var(--pickle-space-4);
  color: var(--pickle-muted);
  font-size: var(--pickle-text-sm);
}

.nm-tool-sum b { color: var(--pickle-text); font-size: var(--pickle-text-lg); }

.nm-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--pickle-space-4);
}

/* Extending a name: open to anyone, so it sits outside Manage. */
.nm-extend {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--pickle-space-5);
  align-items: center;
  margin: var(--pickle-space-5) 0 0;
  padding: var(--pickle-space-5) var(--pickle-space-6);
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}

.nm-extend .nm-sec-h { font-size: var(--pickle-text-xl); margin-bottom: var(--pickle-space-2); }
.nm-extend .nm-tool-for { margin: 0; color: var(--pickle-muted); font-size: var(--pickle-text-sm); line-height: 1.5; }
.nm-extend .nm-tool-sum { margin: var(--pickle-space-2) 0 var(--pickle-space-4); color: var(--pickle-muted); font-size: var(--pickle-text-sm); }
.nm-extend-buy { min-width: 0; }

.nm-tool .nm-tool-hint {
  margin: calc(var(--pickle-space-2) * -1) 0 var(--pickle-space-4);
  color: var(--pickle-subtle);
  font-size: var(--pickle-text-xs);
  line-height: 1.5;
}

#public + .ex-out,
.nm-manage + .ex-out,
.nm-extend + .ex-out { margin-top: var(--pickle-space-4); }

/* ================================================================= my names */

.nm-wait {
  color: var(--pickle-muted);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-sm);
}

.nm-empty {
  padding: var(--pickle-space-6);
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}

.nm-empty p { margin: 0 0 var(--pickle-space-4); color: var(--pickle-muted); }

.nm-rows {
  display: grid;
  gap: var(--pickle-space-2);
  margin: 0 0 var(--pickle-space-4);
  padding: 0;
  list-style: none;
}

.nm-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto;
  gap: var(--pickle-space-3) var(--pickle-space-5);
  align-items: center;
  padding: var(--pickle-space-4) var(--pickle-space-5);
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}

.nm-row.primary { border-left: 2px solid var(--pickle-mint); }

.nm-row-name {
  display: grid;
  gap: var(--pickle-space-2);
  color: var(--pickle-text);
}

.nm-row-name b {
  font-family: var(--pickle-font-display);
  font-size: var(--pickle-text-xl);
  font-weight: 600;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}

.nm-row-name b span { color: var(--pickle-accent-text); }

.nm-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-1) var(--pickle-space-3);
  align-items: center;
  margin: 0;
  color: var(--pickle-muted);
  font-size: var(--pickle-text-sm);
}

.nm-row-act {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-2);
}

.nm-note {
  color: var(--pickle-subtle);
  font-size: var(--pickle-text-sm);
}

.nm-me-actions { margin-top: var(--pickle-space-5); }

/* ===================================================================== send
 * Send to a name. The field is the search's, so typing a name answers the
 * same way; the card beside the order is who the money goes to, drawn in full
 * before anything is signed, and its top edge says what kind of address it is:
 * mint a wallet, amber a contract, rose nobody. */

.nm-send { align-items: start; }

.nm-to {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--pickle-space-4);
  min-width: 0;
  padding: var(--pickle-space-6);
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-top: 2px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  overflow: clip;
  transition: border-color var(--pickle-slow) var(--pickle-ease);
}

.nm-to.live,
.nm-to.paid { border-top-color: var(--pickle-mint); }
.nm-to.contract { border-top-color: var(--pickle-amber); }
.nm-to.bad { border-top-color: var(--pickle-rose-line); }

.nm-to-id {
  display: flex;
  gap: var(--pickle-space-4);
  align-items: center;
  min-width: 0;
}

.nm-to-who { min-width: 0; }

.nm-to-name {
  margin: 0;
  font-family: var(--pickle-font-display);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}

.nm-to-name span { color: var(--pickle-accent-text); }
.nm-to.idle .nm-to-name b { color: var(--pickle-faint); }
.nm-to.contract .nm-to-name span { color: var(--pickle-amber); }
.nm-to.bad .nm-to-name span { color: var(--pickle-rose); }
.nm-to.idle .nm-plate i.on { background: rgb(0 231 136 / 28%); }
.nm-to.bad .nm-plate i.on { background: var(--pickle-rose-line); }
.nm-to.contract .nm-plate i.on { background: var(--pickle-amber); }

.nm-to-sub {
  margin: var(--pickle-space-1) 0 0;
  color: var(--pickle-subtle);
  font-size: var(--pickle-text-sm);
}

.nm-to .nm-bio { margin: 0; }

.nm-to-x {
  margin: calc(var(--pickle-space-2) * -1) 0 0;
  color: var(--pickle-muted);
  font-size: var(--pickle-text-sm);
}

.nm-to-empty {
  margin: 0;
  color: var(--pickle-muted);
  line-height: 1.6;
}

.nm-to-addr {
  padding: var(--pickle-space-4) 0 0;
  border-top: 1px solid var(--pickle-line);
}

/* The address in full, in groups of four: the first and last groups are the
 * ones people compare, so they are the bright ones. */
.nm-addr {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .45rem;
  margin: 0 0 var(--pickle-space-3);
  font-size: var(--pickle-text-lg);
  line-height: 1.5;
  letter-spacing: .02em;
}

.nm-addr-0x { color: var(--pickle-subtle); }
.nm-addr-mid { color: var(--pickle-muted); }
.nm-addr-end { color: var(--pickle-text); font-weight: 500; }

.nm-to-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-2);
  margin: 0;
}

.nm-to-acts .ex-copy { font-size: var(--pickle-text-xs); }

.nm-warns {
  display: grid;
  gap: var(--pickle-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nm-warn {
  padding: var(--pickle-space-3) var(--pickle-space-4);
  color: var(--pickle-muted);
  font-size: var(--pickle-text-sm);
  line-height: 1.55;
  background: var(--pickle-bg);
  border: 1px solid var(--pickle-line);
  border-left-width: 2px;
  border-radius: var(--pickle-radius);
}

.nm-warn b { color: var(--pickle-text); font-weight: 600; }
.nm-warn.amber { background: var(--pickle-amber-soft); border-color: var(--pickle-amber-line); }
.nm-warn.amber b { color: var(--pickle-amber); }
.nm-warn.rose { background: var(--pickle-rose-soft); border-color: var(--pickle-rose-line); }
.nm-warn.rose b { color: var(--pickle-rose); }
.nm-warn.note { background: transparent; }

/* The stamp sits in the card's flow, at its foot, so no name or address of
 * any length runs under it. */
.nm-to .nm-stamp { position: static; display: none; align-self: flex-end; margin: calc(var(--pickle-space-2) * -1) 0 0; }
.nm-to.paid .nm-stamp { display: inline-block; opacity: 1; }

/* ------------------------------------------------------------- the order */

.nm-toks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 var(--pickle-space-3);
  background: var(--pickle-line);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  overflow: clip;
}

.nm-tok {
  min-height: var(--pickle-tap);
  padding: 0 var(--pickle-space-3);
  color: var(--pickle-muted);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-sm);
  cursor: pointer;
  background: var(--pickle-bg);
  border: 0;
  border-top: 2px solid transparent;
  transition: background var(--pickle-fast) var(--pickle-ease), color var(--pickle-fast) var(--pickle-ease);
}

.nm-tok:hover { color: var(--pickle-text); background: var(--pickle-surface-2); }
.nm-tok[aria-pressed="true"] { color: var(--pickle-accent-text); background: var(--pickle-mint-soft); border-top-color: var(--pickle-mint); }
.nm-tok:disabled { cursor: default; opacity: .6; }

.nm-tok:focus-visible {
  position: relative;
  outline: 2px solid var(--pickle-focus);
  outline-offset: -2px;
}

.nm-tok-addr { margin: 0 0 var(--pickle-space-2); }

.nm-tok-info {
  min-height: 1.5em;
  margin: 0 0 var(--pickle-space-5);
  color: var(--pickle-subtle);
  font-size: var(--pickle-text-xs);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.nm-tok-info.warn { color: var(--pickle-amber); }
.nm-tok-info.bad { color: var(--pickle-rose); }

.nm-send-price { margin: 0 0 var(--pickle-space-4); }
.nm-send-price b { overflow-wrap: anywhere; }

.nm-bal {
  color: var(--pickle-muted);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-xs);
  text-align: right;
  overflow-wrap: anywhere;
}

.nm-amt .nm-years-head { flex-wrap: wrap; gap: var(--pickle-space-1) var(--pickle-space-3); }

.nm-amt-line {
  display: flex;
  gap: var(--pickle-space-3);
  align-items: center;
  min-width: 0;
  padding: 0 var(--pickle-space-3) 0 0;
  background: var(--pickle-surface-input);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  transition: border-color var(--pickle-base) var(--pickle-ease);
}

.nm-amt-line:focus-within { border-color: var(--pickle-mint); }
.nm-amt-line:has(.nm-amt-in[aria-invalid="true"]) { border-color: var(--pickle-rose-line); }

.nm-amt-line:has(.nm-amt-in:focus-visible) {
  outline: 2px solid var(--pickle-focus);
  outline-offset: 2px;
}

.ex-form input.nm-amt-in {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 3.5rem;
  padding: 0 var(--pickle-space-4);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-xl);
  font-variant-numeric: tabular-nums;
  background: transparent;
  border: 0;
  outline: none;
}

.nm-amt-sym {
  flex: 0 0 auto;
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-sm);
}

.nm-amt-msg {
  min-height: 1.5em;
  margin: var(--pickle-space-2) 0 0;
  color: var(--pickle-subtle);
  font-size: var(--pickle-text-xs);
  line-height: 1.6;
}

.nm-amt-msg.bad,
.nm-go-hint.bad { color: var(--pickle-rose); }

.nm-pay-acts { margin: 0 0 var(--pickle-space-5); }
.nm-ident + .nm-pay-acts { margin-top: var(--pickle-space-4); }

/* The four steps a send takes: the toolkit's rail, in this site's layer. */
.nm-rail {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nm-rail[hidden] { display: none; }

.nm-rail li {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0 var(--pickle-space-3);
  align-items: baseline;
  padding: .45rem 0;
  color: var(--pickle-faint);
  font-size: var(--pickle-text-sm);
}

.nm-rail li + li::before {
  content: "";
  position: absolute;
  left: .72rem;
  top: -.45rem;
  width: 1px;
  height: .9rem;
  background: var(--pickle-line);
}

.nm-rail-n {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  align-self: center;
  color: var(--pickle-faint);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}

.nm-rail-l { min-width: 0; }

.nm-rail-d {
  grid-column: 2;
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  overflow-wrap: anywhere;
}

.nm-rail-d:empty { display: none; }
.nm-rail-d a { color: var(--pickle-accent-text); text-decoration: underline; text-underline-offset: .2em; }
.nm-rail li.on { color: var(--pickle-text); }
.nm-rail li.on .nm-rail-n { color: var(--pickle-amber); background: var(--pickle-amber-soft); border-color: var(--pickle-amber-line); }
.nm-rail li.ok { color: var(--pickle-muted); }
.nm-rail li.ok .nm-rail-n { color: var(--pickle-mint-ink); background: var(--pickle-mint); border-color: var(--pickle-mint); }
.nm-rail li.ok + li::before { background: var(--pickle-mint-line); }
.nm-rail li.bad { color: var(--pickle-rose); }
.nm-rail li.bad .nm-rail-n { color: var(--pickle-rose); background: var(--pickle-rose-soft); border-color: var(--pickle-rose-line); }

.nm-status {
  margin: var(--pickle-space-3) 0 0;
  color: var(--pickle-muted);
  font-size: var(--pickle-text-sm);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.nm-status:empty { display: none; }
.nm-status.err { color: var(--pickle-rose); }
.nm-status.warn { color: var(--pickle-amber); }

.nm-send #done:not([hidden]) { margin-top: var(--pickle-space-4); }
.nm-send .nm-done-h span { font-size: .6em; letter-spacing: -.02em; }

/* ================================================================== narrow */

@media (max-width: 860px) {
  .nm-deal,
  .nm-namehead { grid-template-columns: minmax(0, 1fr); }
  .nm-card { min-height: 0; }
  .nm-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nm-row { grid-template-columns: minmax(0, 1fr); }
  .nm-extend { grid-template-columns: minmax(0, 1fr); padding: var(--pickle-space-5); }
}

@media (max-width: 560px) {
  .ex-wrap.app.nm { padding-top: var(--pickle-space-6); }
  .nm-card,
  .nm-to,
  .nm-order,
  .nm-panel { padding: var(--pickle-space-5); }
  .nm-addr { font-size: var(--pickle-text-md); }
  .nm-bal { text-align: left; }
  .nm-stamp { right: var(--pickle-space-5); bottom: 3.2rem; font-size: var(--pickle-text-sm); }
  .nm-tiers li { padding: var(--pickle-space-3); }
  .nm-tiers b { font-size: var(--pickle-text-md); }
  .nm-plate { --cell: 9px; gap: 2px; }
  .nm-plate.sm { --cell: 4px; gap: 1px; }
  .nm-facts,
  .nm-tools,
  .nm-tool-grid,
  .nm-card-kv { grid-template-columns: minmax(0, 1fr); }
  .nm-done-kv div,
  .nm-kv div { grid-template-columns: minmax(0, 1fr); gap: var(--pickle-space-1); }
}

/* ================================================================== motion */

@media (prefers-reduced-motion: no-preference) {
  .nm-field,
  .nm-tiers { animation: ex-in 700ms var(--pickle-ease) 200ms both; }
  .nm-deal { animation: ex-in 760ms var(--pickle-ease) 320ms both; }

  /* The column just typed rises into the plate. */
  .nm-plate i.new { animation: nm-bit 320ms var(--pickle-ease) both; }
  .nm-plate i.new:nth-child(6n + 2) { animation-delay: 25ms; }
  .nm-plate i.new:nth-child(6n + 3) { animation-delay: 50ms; }
  .nm-plate i.new:nth-child(6n + 4) { animation-delay: 75ms; }
  .nm-plate i.new:nth-child(6n + 5) { animation-delay: 100ms; }
  .nm-plate i.new:nth-child(6n) { animation-delay: 125ms; }

  .nm-card.sending::after { animation: nm-sweep 1.1s var(--pickle-ease) infinite; }

  /* Registered: the plate lights left to right, then the stamp comes down. */
  .nm-plate i.lit { animation: nm-lit 900ms var(--pickle-ease) calc(var(--c, 0) * 45ms) both; }
  .nm-card.minted .nm-stamp { animation: nm-stamp 420ms cubic-bezier(.3, 1.6, .5, 1) 380ms both; }
  .nm-card.minted { animation: nm-land 700ms var(--pickle-ease) both; }

  .nm-dot { transition: background var(--pickle-base) var(--pickle-ease); }
  [data-level="checking"] .nm-dot { animation: nm-pulse 900ms ease-in-out infinite; }
  .nm-live { animation: nm-pulse 2.4s ease-in-out infinite; }

  .nm-chip { animation: ex-in-sm 520ms var(--pickle-ease) both; }
  .nm-chip:nth-child(2) { animation-delay: 40ms; }
  .nm-chip:nth-child(3) { animation-delay: 80ms; }
  .nm-chip:nth-child(4) { animation-delay: 120ms; }
  .nm-chip:nth-child(n + 5) { animation-delay: 160ms; }
  .nm-chip.fresh a { animation: nm-fresh 2.4s var(--pickle-ease) both; }

  .nm-send { animation: ex-in 760ms var(--pickle-ease) 320ms both; }
  .nm-rail li.on .nm-rail-n { animation: nm-pulse 1.1s ease-in-out infinite; }
  .nm-to.paid .nm-stamp { animation: nm-stamp 420ms cubic-bezier(.3, 1.6, .5, 1) 200ms both; }
  .nm-to.paid { animation: nm-land 700ms var(--pickle-ease) both; }
  .nm-send #done:not([hidden]) { animation: ex-in 520ms var(--pickle-ease) both; }
}

@keyframes nm-bit {
  from { opacity: 0; transform: translateY(-10px) scaleY(.2); }
  to { opacity: 1; transform: none; }
}

@keyframes nm-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(560%); }
}

@keyframes nm-lit {
  0% { background: var(--pickle-mint); }
  35% { background: var(--pickle-mint-hi); transform: scale(1.25); }
  100% { background: var(--pickle-mint); transform: none; }
}

@keyframes nm-stamp {
  from { opacity: 0; transform: rotate(-8deg) scale(1.9); }
  to { opacity: 1; transform: rotate(-8deg) scale(1); }
}

@keyframes nm-land {
  0% { border-color: var(--pickle-line); }
  40% { border-color: var(--pickle-mint-line); }
  100% { border-color: var(--pickle-line); }
}

@keyframes nm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

@keyframes nm-fresh {
  from { background: rgb(0 231 136 / 16%); border-color: var(--pickle-mint); }
  to { background: var(--pickle-surface-1); border-color: var(--pickle-line); }
}

/* A listed token's logo, from the public token list via the explorer's
 * same-origin /api/tokenlogo/, ahead of its line in the send form. */
.nm-tlogo {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  margin-right: var(--pickle-space-2);
  vertical-align: -0.2em;
  object-fit: cover;
  border: 1px solid var(--pickle-line);
  border-radius: 50%;
}