/* tip.css — "Tip the holder" button + dialog (js/tip.js). Uses css/tokens.css. */

.tip-open{cursor:pointer;background:none;color:inherit}   /* the look comes from the page's .btn.ghost */
.tip-open-glyph{font-size:10px;color:var(--gold)}

/* Matches the page's .sheet dialogs (mask.html). */
.tip-dialog{margin:auto;inset:0;width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:0;   /* margin: the page's reset zeroes the UA centring */
  background:#12100e;color:var(--off);border:1px solid var(--line2,var(--faint));border-radius:22px;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.9);font-family:var(--font-ui);font-size:var(--fs-body-sm)}
.tip-dialog::backdrop{background:rgba(3,2,2,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tip-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line)}
.tip-title{margin:0;font-family:var(--font-ui);font-size:var(--fs-meta);font-weight:700;letter-spacing:var(--track-display);text-transform:uppercase;color:var(--off)}
.tip-close{width:32px;height:32px;flex:none;border-radius:50%;background:none;border:1px solid var(--line2,var(--faint));
  color:var(--dim);font-size:18px;line-height:1;cursor:pointer}
.tip-close:hover{border-color:var(--gold)}
.tip-close:hover{color:var(--gold)}
.tip-body{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-5)}
.tip-sub{margin:0;font-size:var(--fs-heading);font-weight:600;color:var(--off)}
.tip-note{margin:0;color:var(--off-70);font-size:var(--fs-button);line-height:1.5}
.tip-note--warn{color:var(--gold-link)}
.tip-busy{margin:0;color:var(--off-70)}
.tip-ok{margin:0;color:var(--success)}
.tip-err{margin:0;color:var(--danger);font-size:var(--fs-button);min-height:1em}
.tip-err:empty{display:none}

.tip-field{display:flex;flex-direction:column;gap:var(--s-2)}
.tip-label{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:var(--track-default);text-transform:uppercase;color:var(--dim)}
.tip-tokens{display:flex;gap:var(--s-2)}
.tip-token{flex:1;position:relative}
.tip-token input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tip-token span{display:block;text-align:center;padding:9px 0;border:1px solid var(--faint);border-radius:var(--r-sm);
  font-family:var(--font-mono);font-size:var(--fs-button);color:var(--off-70)}
.tip-token input:checked + span{border-color:var(--gold);color:var(--gold);background:var(--gold-faint)}
.tip-token input:focus-visible + span{outline:2px solid var(--gold-dim);outline-offset:2px}
.tip-input{width:100%;box-sizing:border-box;background:var(--bg);color:var(--off);border:1px solid var(--faint);
  border-radius:var(--r-sm);padding:10px 12px;font-family:var(--font-mono);font-size:var(--fs-body)}
.tip-input:focus{outline:none;border-color:var(--gold)}
.tip-balance{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--dim)}

.tip-summary{display:flex;flex-direction:column}
.tip-row{display:flex;justify-content:space-between;gap:var(--s-3);padding:var(--s-2) 0;border-top:1px solid var(--line)}
.tip-row .k{color:var(--dim);font-size:var(--fs-button)}
.tip-row .v{font-family:var(--font-mono);font-size:var(--fs-button);text-align:right}
.tip-row .tip-amount-v{color:var(--gold);font-weight:600}
.tip-to{display:flex;flex-direction:column;gap:var(--s-1)}
.tip-to .k{color:var(--dim);font-size:var(--fs-button)}
.tip-addr{display:block;padding:10px 12px;background:var(--bg);border:1px solid var(--gold-dim);border-radius:var(--r-sm);
  font-family:var(--font-mono);font-size:var(--fs-button);color:var(--off);word-break:break-all;user-select:all}

.tip-wallets{display:flex;flex-direction:column;gap:var(--s-2)}
.tip-wallet{display:flex;align-items:center;gap:var(--s-3);padding:10px 12px;background:var(--bg);border:1px solid var(--faint);
  border-radius:var(--r-sm);color:var(--off);font:inherit;cursor:pointer;text-align:left}
.tip-wallet:hover{border-color:var(--gold-dim)}
.tip-wallet img,.tip-wallet-noicon{width:24px;height:24px;flex:none;border-radius:var(--r-sm)}
.tip-wallet-noicon{background:var(--faint)}

.tip-actions{display:flex;justify-content:flex-end;gap:var(--s-3)}
.tip-actions:empty{display:none}
.tip-btn-primary,.tip-btn-ghost{border-radius:999px;cursor:pointer;padding:9px 16px;font-family:var(--font-mono);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.tip-btn-primary{background:var(--gold);color:var(--bg);border:0}
.tip-btn-ghost{background:none;color:var(--off-70);border:1px solid var(--faint)}
.tip-btn-ghost:hover{color:var(--off);border-color:var(--off-50)}
.tip-btn-primary:focus-visible,.tip-btn-ghost:focus-visible{outline:2px solid var(--gold-dim);outline-offset:2px}
.tip-link{color:var(--gold-link);font-size:var(--fs-button)}

/* USD estimate — secondary to the token amount, never louder than it */
.tip-usd{font-family:var(--font-mono);font-size:var(--fs-button);color:var(--off-70);min-height:1.2em}
.tip-row .tip-usd-v{color:var(--off-70)}
.tip-note--dim{color:var(--dim);font-size:var(--fs-meta)}
.tip-note:empty{display:none}