/* THE LISTING FORMS' STYLES - shared by pDev's two form tabs since
   2026-09-24: pdev-get-listed.html (Get Listed: the write-up, register,
   Dev Listing) and pdev-manage.html (Manage: Dev Updates, the four token
   forms, Token Logo). Per user: "move all the Manage listing under a tab
   under pDev called Manage Card and all these forms fall under that now",
   then "move Get Listed! and the 2 forms and the write up into pDev tab
   called Get Listed... (change to Manage)". Lifted out of advertise.html's
   <style> block unchanged; js/listing.js is the matching script. */
  /* THE FORMS - one centred column, every field the same shape (2026-09-17,
     per user: "make the advertisement form look more professional and not
     so off-centered... things are all over the place and not lined up").
     A field is: one label line (title, hint in muted on the SAME line),
     then one control of a fixed height. Two columns on a desktop, one on
     a phone; every control in a row starts at the same y. */
  #claim { max-width: 920px; margin: 32px auto 0; }
  #claim > h2 { text-align: center; }   /* per user 2026-09-24: "Get Listed! (lets center this)" */
  #claim > p { text-align: left; }
  .claimform { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
  .claimform .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .claimform .field[hidden] { display: none; }   /* the flex rule would beat the attribute (the logo's wallet field under a sign-in) */
  .claimform .full { grid-column: 1 / -1; }
  .claimform .lbl { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 18px; }
  .claimform .lbl .hint { font-weight: 400; color: var(--text-muted); margin-left: 6px; }
  /* The logo preview: what the form will send, beside a note and the crop slider. */
  .logoprep { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .logoviews { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
  .logoviews figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .logoviews figcaption { font-size: 11px; color: var(--text-muted); }
  .lv-big img { width: 112px; height: 112px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); object-fit: cover; }
  /* The mock row: the same 22 px ring-shadowed icon site.css gives every list row. */
  .mockrow { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13px; }
  .mockrow img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
  .mockrow .mocksym { font-weight: 600; }
  .mockrow .mockname { color: var(--text-muted); font-size: 12px; }
  .logoprepside { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; min-width: 0; }
  .logoprepside label { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
  .logoprepside input[type="range"] { width: 180px; max-width: 100%; }
  .btn2.small { height: 26px; padding: 0 10px; font-size: 12px; }
  /* The cropper: the picture fitted into a 300 px box, a square frame over
     it (its shadow dims everything outside), a dashed circle inside. */
  .cropper { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; max-width: 100%; }
  .cropstage { position: relative; overflow: hidden; border-radius: 8px; background: #000; touch-action: none; user-select: none; cursor: grab; line-height: 0; }
  .cropstage.dragging { cursor: grabbing; }
  .cropstage img { display: block; pointer-events: none; }
  .cropframe { position: absolute; box-sizing: border-box; border: 2px solid var(--accent); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55); border-radius: 2px; }
  .cropcircle { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.85); }
  .cropctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); max-width: 320px; }
  .cropctl label { display: flex; align-items: center; gap: 8px; }
  .cropctl input[type="range"] { width: 120px; }
  .cropctl .hint { font-size: 11.5px; line-height: 1.4; }
  .logoprep.noimg .cropper { display: none; }
  .logoprepside .bad { color: var(--bad); }
  .logoprep.noimg .logoviews { display: none; }   /* a file that is not an image: just the message, no empty views */
  .claimform .ctl, .claimform input[type="text"], .claimform select, .claimform input[type="file"] {
    height: 40px; box-sizing: border-box; width: 100%; padding: 0 12px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg); color: var(--text);
    font-size: 13.5px; font-weight: 400; font-family: inherit;
  }
  .claimform input[type="file"] { padding: 8px 12px; font-size: 13px; }
  /* The Token+ fee boxes are number inputs, which the rule above never
     covered - the browser's own white inset box showed, even in the dark
     theme (2026-10-07, phone cleanup). No width here: .feerow input sets it. */
  .claimform input[type="number"] {
    height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg); color: var(--text);
    font-size: 13.5px; font-weight: 400; font-family: inherit;
  }
  .claimform input[type="number"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
  /* The sign-in panel's boxes (the wallet, the hash) sit outside every form -
     the same look as the forms', or the browser's own grey shows (2026-10-05). */
  .loginpanel input[type="text"] { height: 40px; box-sizing: border-box; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13.5px; font-family: inherit; }
  .loginpanel input[type="text"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
  .claimform input[type="text"]:focus, .claimform select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
  .claimform input::placeholder { color: color-mix(in srgb, var(--text-muted) 70%, transparent); }
  /* A control with a button on its right, the same height. */
  .claimform .btn2, .loginpanel .btn2 {
    height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface-hover); color: var(--text); font-weight: 600; font-size: 13px;
    cursor: pointer; white-space: nowrap; font-family: inherit;
  }
  .claimform .btn2:hover, .loginpanel .btn2:hover { border-color: var(--accent); color: var(--accent); }
  /* Radios: title left, options in a row, same 40px line as a control. */
  .claimform .choice { display: flex; align-items: center; gap: 22px; min-height: 40px; font-size: 13.5px; color: var(--text); }
  .claimform .choice .lbl { margin-right: 4px; }
  .claimform .choice label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
  /* The agreement tick sits on its own line and wraps like a sentence, not
     like a radio row - it IS a sentence. */
  .claimform .agreebox label { align-items: flex-start; line-height: 1.5; font-size: 13px; }
  .claimform .agreebox input { margin-top: 3px; flex: none; }
  .claimform .agreebox a { color: var(--link); }
  .claimform .choice input { margin: 0; accent-color: var(--accent); }
  /* The one accent button per form: submit. */
  .claimform .claimBtn {
    height: 42px; padding: 0 22px; border-radius: 8px; border: none; background: var(--accent);
    color: var(--accent-text); font-weight: 600; font-size: 14px; cursor: pointer; justify-self: start; font-family: inherit;
    /* One line, never squeezed by the note beside it (2026-10-07, phone
       cleanup): "Submit dev listing" wrapped to three lines inside its
       fixed 42 px and ran out of the button. The note wraps under it on a
       phone instead (the actions row wraps there, below). */
    white-space: nowrap; flex: none;
  }
  .claimform .claimBtn:disabled { opacity: 0.6; cursor: default; }
  .claimform .actions { display: flex; align-items: center; gap: 14px; padding-top: 4px; border-top: 1px solid var(--border); margin-top: 4px; }
  .claimform .actions .note { font-size: 12px; color: var(--text-muted); }
  .photorow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  /* The wallet proof: two options side by side (one column on a phone),
     each a dashed box like the Token+ detail. */
  .proofopts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .proofopt { display: grid; gap: 8px; align-content: start; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; }
  .proofopt[hidden] { display: none; }
  .proofopt.done { border-style: solid; border-color: var(--good); }
  .proofopt.unavailable .proofTx { display: none; }
  .proofsession { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--good); border-radius: 10px; font-size: 13px; }
  .proofsession[hidden], .proofopts[hidden] { display: none; }
  .proofsession .proofSessionText b { color: var(--good); }
  .proofttl { font-size: 13px; font-weight: 600; line-height: 1.45; }
  .proofttl .hint { font-weight: 400; color: var(--text-muted); margin-left: 4px; }
  .proofrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
  .proofrow .dimtext { color: var(--text-muted); }
  .proofrow .dimtext.ok { color: var(--good); font-weight: 600; }
  .proofrow .dimtext.bad { color: var(--bad); }
  .proofrow .donation { font-size: 12px; }
  .proofWallet[readonly] { color: var(--text-muted); background: color-mix(in srgb, var(--surface-hover) 60%, transparent); }
  .proofblock { display: grid; gap: 10px; }
  /* THE SIGN-IN PANEL (2026-09-24): one card at the top of the page - the
     status line, then the two ways in while not signed in. */
  .loginpanel { display: grid; gap: 10px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
  .loginstatus { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
  .loginState { font-weight: 600; color: var(--text-muted); }
  .loginState.on { color: var(--text); }
  .loginState.on b { color: var(--good); }
  .loginState code { font-size: 13px; }
  .loginLeft { font-variant-numeric: tabular-nums; }
  .loginhint { margin: 0; font-size: 13px; }
  .loginhint[hidden], .loginopts[hidden], .loginLeft[hidden], .loginSignOut[hidden] { display: none; }
  .loginopts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .loginopt { display: grid; gap: 8px; align-content: start; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; }
  .loginopt.unavailable .loginTx, .loginopt.unavailable .loginConfirmBtn, .loginopt.unavailable .loginback { display: none; }
  .loginopt input[type="text"] { flex: 1 1 220px; min-width: 0; }
  .loginopt .loginAmount { font-weight: 700; color: var(--text); }
  .loginback .hint { color: var(--text-muted); font-size: 12px; }
  .proofblock.sessiononly .proofwho { font-weight: 500; }
  @media (max-width: 700px) { .loginopts { grid-template-columns: 1fr; } }
  .proofwho { font-size: 13px; font-weight: 600; color: var(--text-muted); }
  .proofwho.ok { color: var(--good); }
  .proofwho.bad { color: var(--bad); }
  .proofwho[hidden] { display: none; }
  .devnamefield[hidden] { display: none; }
  /* Dev Updates: the loaded card is its own two-column grid inside the form. */
  .updbody { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; padding-top: 10px; border-top: 1px dashed var(--border); }
  .updbody[hidden] { display: none; }
  .walletlist { display: flex; flex-wrap: wrap; gap: 8px; font-family: "IBM Plex Mono", monospace; font-size: 12px; }
  .walletlist code { padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
  .addwallettick { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; margin-top: 4px; }
  .addwallettick input { margin: 0; accent-color: var(--accent); width: 16px; height: 16px; }
  .addwallettick .hint { font-size: 12px; color: var(--text-muted); }
  .addwalletslot { margin-top: 6px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; }
  .addwalletslot[hidden] { display: none; }
  /* The fee boxes (the listing fee on Register, the logo fee): the price,
     the address with Copy, the wallet and the payment hash. */
  .feebox { padding: 10px 12px; border: 1px dashed var(--accent); border-radius: 10px; }
  .feebox[hidden] { display: none; }
  .feebox .field { padding: 0; }
  .feeline { margin: 0 0 10px; font-size: 13.5px; font-weight: 600; }
  .feeline[hidden] { display: none; }
  .feerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
  /* Scoped to the fee BOX (2026-10-07, phone cleanup): as a bare ".feerow
     input" it also matched the Token+ fee boxes, whose 84 px width below
     never won against this min-width - 240 px boxes that pushed the token
     row off a phone. A basis, not a min-width, so a box wraps to its own
     line rather than running past the card. */
  .feebox .feerow input { flex: 1 1 240px; min-width: 0; }
  .feerow .dimtext.ok { color: var(--good); font-weight: 600; }
  .feerow .dimtext.bad { color: var(--bad); }
  /* The door to the dev sign-up on Advertisement: a fold head that is a link. */
  .listkind.doorfold { padding-bottom: 16px; }
  .listkind.doorfold a.lkhead { text-decoration: none; color: inherit; }
  .listkind.doorfold a.lkhead:hover .lkname { color: var(--accent); }
  .tokitem.unchanged .tokrow .taddr { color: var(--text-muted); }
  /* THE DEV UPDATES TOKEN LIST (2026-09-25): a read-only row per token -
     symbol over the chain name, the short address with a copy button, the
     tag, the nickname box, Hide / Unhide - under the wallet tabs. */
  .updwallettabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
  .updwallettabs button { background: none; border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; font-family: inherit; }
  .updwallettabs button.on { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
  .updwallettabs button .cnt { opacity: 0.8; margin-left: 4px; }
  .updtokhead, .updtok { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) auto; gap: 10px; align-items: center; }   /* Token | Address + tag | Edit / Hide / Delete (the nickname column came off 2026-09-25) */
  .updtokbtns { display: flex; gap: 6px; justify-content: flex-end; }
  /* Remove Me: one tick per registered wallet. */
  .rmwallets { display: flex; flex-direction: column; gap: 6px; }
  .rmwallets label { display: flex; align-items: center; gap: 8px; font-family: "IBM Plex Mono", monospace; font-size: 12.5px; cursor: pointer; }
  .rmwallets label .you { font-family: "Public Sans", system-ui, sans-serif; font-size: 11px; color: var(--text-muted); }
  /* A whole border (2026-10-07): the submit rule's "border: none" left the
     style at none, so a colour alone drew nothing and Remove read as stray
     red text. */
  #removeSubmit { border: 1px solid var(--bad); color: var(--bad); background: none; }
  #removeSubmit:not(:disabled):hover { background: var(--bad); color: #fff; }
  .updtok .editbtn, .updtok .delbtn { height: 34px; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); cursor: pointer; font-size: 12.5px; font-family: inherit; padding: 0 10px; }
  .updtok .editbtn:hover { color: var(--accent); border-color: var(--accent); }
  .updtok .delbtn:hover { color: var(--bad); border-color: var(--bad); }
  /* A Token+ row says where its figures come from: read off the contract,
     or reported by the dev (an asterisk, editable). */
  .updtok .tpmark { font-size: 11px; white-space: nowrap; }
  .updtok .tpmark.contract { color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 40%, transparent); border-radius: 999px; padding: 1px 7px; }
  .updtok .tpmark.reported { color: var(--bad); font-weight: 700; font-size: 15px; line-height: 1; cursor: help; }
  .updtokedit { grid-column: 1 / -1; padding: 8px 0 4px; border-top: 1px dashed var(--border); margin-top: 6px; }
  .updtokedit[hidden] { display: none; }
  .updtokedit .editactions { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
  .updtokhead { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 0 6px; }
  .updtokrows { display: grid; gap: 6px; }
  .updtok { padding: 6px 0; border-top: 1px solid var(--border); }
  .updtok[hidden] { display: none; }
  .updtok.changed { background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 8px; padding-left: 6px; padding-right: 6px; }
  .updtok.hiddentok .updtokname, .updtok.hiddentok .updtokaddr { opacity: 0.5; }
  .updtokname { display: grid; min-width: 0; }
  .updtokname .sym { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }   /* a long symbol wraps in its column, never across the address (2026-10-07) */
  .updtokname .nm { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .updtokaddr { display: flex; align-items: center; gap: 6px; font-size: 12px; min-width: 0; flex-wrap: wrap; }
  .updtokaddr code { font-family: "IBM Plex Mono", monospace; }
  .updtokaddr .copybtn { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; font-size: 11px; cursor: pointer; color: var(--text-muted); font-family: inherit; }
  .updtokaddr .tag { font-size: 10.5px; border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; color: var(--text-muted); white-space: nowrap; }
  .updtok .hidebtn { height: 34px; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); cursor: pointer; font-size: 12.5px; font-family: inherit; padding: 0 10px; }
  .updtok .hidebtn:hover { color: var(--bad); border-color: var(--bad); }
  .updtok.hiddentok .hidebtn { color: var(--good); border-color: var(--good); }
  .updtok .hiddenmark { font-size: 10.5px; color: var(--bad); margin-left: 6px; white-space: nowrap; }   /* one word when a long symbol wraps (it broke as "hidd" / "en", 2026-10-07) */
  .updaddtokens { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; }
  .updaddtokens .lbl { margin-right: 4px; }
  .updaddtokens .hint { font-size: 12px; color: var(--text-muted); }
  @media (max-width: 700px) { .updbody { grid-template-columns: 1fr; } .updtokhead { display: none; } .updtok { grid-template-columns: minmax(0, 1fr) minmax(0, auto); } }   /* minmax: the buttons' min-content held the 1fr open and the address ran off the list (German, 2026-10-08) */
  .proofrow .proofAmount { font-weight: 700; color: var(--text); }
  .proofrow[hidden] { display: none; }   /* the flex rule would beat the attribute */
  /* The three steps (2026-09-24): numbered, the user's words. */
  #steps { margin: 0 0 12px; padding-left: 22px; font-size: 14px; line-height: 1.55; }
  #steps li { margin: 0 0 8px; }
  /* TWO SECTIONS OF FORMS (2026-09-24, per user: "seperate Developer forms
     1 and 2. and then have a break in the page between forms and then we
     have our Update Information Forms"): the developer setup (steps 1 and
     2) under one heading, a divider, then everything a listed dev does
     from there - Dev Updates, the four token forms, the logo - under the
     second. The folds themselves are untouched; only the wrappers and
     the two headings are new. */
  .formsection { margin: 0; }
  .formsection .sectionhead { font-family: "Public Sans", system-ui, sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; text-align: left; }   /* the same face as the fold heads below it */
  .formsection .sectionsub { font-size: 13.5px; color: var(--text-muted); margin: 0 0 14px; }
  .sectionbreak { border: 0; border-top: 1px solid var(--border); margin: 26px 0 30px; }
  @media (max-width: 700px) { .proofopts { grid-template-columns: 1fr; } }
  .photopreview { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border); }
  .photopreview[hidden] { display: none; }
  /* The same answer under the button that was pressed (listing.js `say`). */
  .formresult { margin-top: 10px; font-size: 13.5px; line-height: 1.45; }
  .formresult:empty { display: none; }
  .formresult.ok { color: var(--good); font-weight: 600; }
  .formresult.bad { color: var(--bad); font-weight: 600; }
  #claimResult { margin-top: 12px; font-size: 13.5px; text-align: center; }
  #claimResult.ok { color: var(--good); font-weight: 600; }
  #claimResult.bad { color: var(--bad); font-weight: 600; }
  .donation { font-family: "IBM Plex Mono", monospace; font-size: 12px; word-break: break-all; }
  /* Each kind of request is a fold like a dev card: click the head to
     open. The free listing opens first; the paid logo is folded. */
  .listkind { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 16px 22px 20px; margin: 0 0 14px; }
  .listkind .lkhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; flex-wrap: wrap; }
  /* Public Sans, not Fraunces (2026-09-25, per user: "the form header
     writing is distorted a bit... j looks weird"): at 20 px Fraunces
     renders its small optical size, whose hooked J and swashy g read as
     distorted in "Wild Token Adoption (Claim from Jungle)". The sans
     matches the form's own type. */
  .listkind .lkname { font-family: "Public Sans", system-ui, sans-serif; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .listkind .lkname .groupbadge { font-family: "Public Sans", sans-serif; margin: 0; }
  .listkind .lktoggle { font-size: 12px; color: var(--text-muted); }
  .listkind .lkbody { margin-top: 12px; }
  .listkind.collapsed .lkbody { display: none; }
  .listkind p { font-size: 13.5px; line-height: 1.55; color: var(--text); margin: 0 0 14px; }
  .listkind p.dimtext { color: var(--text-muted); }
  .verified { color: var(--good); font-weight: 600; }
  /* The token rows on the listing form: a small table, same control height. */
  .toklist { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px 8px; background: color-mix(in srgb, var(--bg) 60%, transparent); }
  .tokhead, .tokrow { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.6fr) 36px; gap: 8px; align-items: center; }
  /* A row with no middle column (PumpTires: no nickname, no pull-down). */
  .tokhead.noextra, .tokrow.noextra { grid-template-columns: minmax(0, 1fr) 36px; }
  .tokrow select.tfactory { height: 40px; }
  .tokhead { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 0 6px; }
  .tokrows { display: grid; gap: 8px; }
  .tokitem { display: grid; gap: 6px; }
  .rowextra { padding: 2px 0 4px 6px; font-size: 13px; color: var(--text); }
  .rowextra[hidden] { display: none; }
  .rowextra .chk { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
  .rowextra .chk input { margin: 0; accent-color: var(--accent); width: 16px; height: 16px; }
  .rowextra .sel { display: flex; align-items: center; gap: 8px; font-weight: 400; }
  .rowextra .sel select { width: auto; min-width: 140px; }
  .rowextra .hint { font-size: 12px; color: var(--text-muted); }
  .tpdetail { display: grid; gap: 8px; margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; }
  .tpdetail[hidden], .rewardrow[hidden] { display: none; }
  .tpdetail .rewardrow input { flex: 1; min-width: 0; max-width: 460px; }
  .feerow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
  .feerow .feelbl { font-weight: 600; }
  .feerow label { display: flex; align-items: center; gap: 6px; font-weight: 400; }
  .feerow input { width: 84px; }
  .feerow .pct { color: var(--text-muted); font-size: 12px; }
  .feerow[hidden] { display: none; }
  .splitbtn, .unsplitbtn, .addrewardbtn { background: none; border: 1px dashed var(--border); color: var(--text-muted); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; font-family: inherit; }
  .splitbtn:hover, .unsplitbtn:hover, .addrewardbtn:hover { color: var(--accent); border-color: var(--accent); }
  /* MORE THAN ONE REWARD TOKEN (2026-09-23): each extra reward is its own
     block under the first - address, then the same fee row - with a × */
  .feeblock { display: grid; gap: 8px; }
  .rewardblock { border-top: 1px dashed var(--border); padding-top: 8px; }
  .rewardhead { display: flex; align-items: center; gap: 8px; }
  .rewardhead .rewardrow { flex: 1; }
  .rmreward { background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: 8px; width: 28px; height: 28px; cursor: pointer; font-size: 16px; line-height: 1; }
  .rmreward:hover { color: var(--bad); border-color: var(--bad); }
  .addrewardbtn { justify-self: start; }
  .addrewardbtn[hidden], .extrarewards[hidden] { display: none; }
  .tokrow .rm { height: 40px; width: 36px; background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; font-family: inherit; }
  .tokrow .rm:hover { color: var(--bad); border-color: var(--bad); }
  .tokfoot { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; }
  .addrow { font-size: 12.5px; font-weight: 600; color: var(--accent); cursor: pointer; background: none; border: none; padding: 4px 0; font-family: inherit; }
  .addrow:hover { text-decoration: underline; }
  /* What the records say the wallet launched: tick to add a row. */
  @media (max-width: 700px) {
    .claimform { grid-template-columns: 1fr; }
    .tokhead { display: none; }
    .tokrow { grid-template-columns: 1fr 36px; }
    /* The Dysnomia form's factory pull-down (review, 2026-10-16): on the
       two-column phone row it was put in the 36 px column and showed only
       its caret, so LAU / Qing / Yue / V1-V4 were picked blind. The address
       and its x on the first line, the pull-down the full width under them. */
    .tokrow:has(.tfactory) .taddr { grid-column: 1; grid-row: 1; }
    .tokrow:has(.tfactory) .rm { grid-column: 2; grid-row: 1; }
    .tokrow .tfactory { grid-column: 1 / -1; grid-row: 2; width: 100%; }
    .claimform .lbl { white-space: normal; }
  }
  /* THE PHONE CLEANUP (2026-10-07, per user: "also clean up mobile as well
     if you can"): what the audit found on the three form pages at 360-414
     px. Phone only; a desktop keeps its layout. */
  @media (max-width: 760px) {
    /* The note beside a submit drops under it rather than squeezing it. */
    .claimform .actions { flex-wrap: wrap; row-gap: 8px; }
    /* A radio row: its title on a line of its own ("Submission" was cut to
       "Submis..."), the options after it, wrapping, with a finger-sized
       target each. */
    .claimform .choice { flex-wrap: wrap; gap: 4px 18px; }
    .claimform .choice .lbl { flex: 0 0 100%; overflow: visible; }
    .claimform .choice label { min-height: 36px; }
    .claimform .choice input[type="radio"] { width: 18px; height: 18px; }
    /* Remove Me: the full address wraps in its own column beside the tick,
       and "the one you are signed in with" sits under it - the 42 characters
       ran past the card and pushed the whole page sideways. */
    .rmwallets label { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: start; line-height: 1.45; }
    .rmwallets label input { margin: 2px 0 0; width: 18px; height: 18px; }
    .rmwallets label code { min-width: 0; overflow-wrap: anywhere; }
    .rmwallets label .you { grid-column: 2; }
    /* "Remove my whole listing" under them: the same tick and the same
       hanging line (its second line ran back under a 13 px browser tick).
       :not([hidden]) - the grid would beat the attribute when there is no
       listing to remove. */
    .rmwallets + label.chk:not([hidden]) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: start; }
    .rmwallets + label.chk input { margin: 2px 0 0; width: 18px; height: 18px; }
    /* The Token+ row's type line wraps (the select, then its hint), so the
       row never runs past the token list. */
    .rowextra .sel { flex-wrap: wrap; }
    .rowextra .sel select { flex: 1 1 140px; }
    .tpdetail .rewardrow { flex-wrap: wrap; }
    .tpdetail .rewardrow input { flex: 1 1 100%; max-width: none; }
    /* Dev Updates' small controls, finger-sized: the wallet tabs, each row's
       copy, "+ add another token" on the token forms. */
    .updwallettabs button { padding: 7px 12px; min-height: 34px; }
    .updtokaddr .copybtn { padding: 6px 10px; min-height: 32px; font-size: 12px; }
    .addrow { padding: 10px 0; }
    .splitbtn, .unsplitbtn, .addrewardbtn { padding: 7px 12px; }
    /* "Add another wallet" stays one line beside its tick; the hint goes
       under it (it was squeezed to three lines). */
    .addwallettick { flex-wrap: wrap; row-gap: 2px; }
    .addwallettick .hint { flex-basis: 100%; padding-left: 24px; }
    /* The Token+ mark explains itself on a tap (js/listing.js): a finger's
       worth of target around it, the mark itself the size it was. */
    .updtok .tpmark { position: relative; }
    .updtok .tpmark::before { content: ""; position: absolute; inset: -9px -9px; }
  }

/* THE AD SPOTS FOLD (2026-09-28, js/adspots.js): the spots we mean to run
   as cards with a sketch of where each sits, the rules, and the register of
   interest. Scoped under #kindAds. */
#kindAds .adrules { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin: 4px 0 16px; }
#kindAds .adrulestitle { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); font-weight: 700; margin: 0 0 6px; }
#kindAds .adrules ul { margin: 0; padding-left: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 24px; }
#kindAds .adrules li { font-size: 13.5px; line-height: 1.5; }
#kindAds .offergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0 0 18px; }
#kindAds .offer { display: grid; grid-template-columns: 1fr 88px; gap: 2px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px 10px; }
#kindAds .offer.picked { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
#kindAds .offername { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
#kindAds .offer .where { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.35; }
#kindAds .offer .what { grid-column: 1 / -1; font-size: 13.5px; line-height: 1.5; margin: 8px 0 0; color: var(--text); }
#kindAds .offer .want { grid-column: 1 / -1; justify-self: end; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); width: 100%; justify-content: flex-end; }
#kindAds .offer .want input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
#kindAds .sketch { grid-row: 1 / span 1; grid-column: 2; width: 88px; height: 59px; }
#kindAds .sketch .pg { fill: var(--surface); stroke: var(--border); }
#kindAds .sketch .ln { fill: var(--border); }
#kindAds .sketch .hot { fill: var(--accent); }
#kindAds .sketch .hotline { fill: none; stroke: var(--accent); stroke-width: 1.4; }
#kindAds .adpicks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 26px; }
#kindAds .adpicks .lbl { margin-right: 2px; }
#kindAds .adpicks .chip { font-size: 12.5px; font-weight: 600; border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; padding: 3px 10px; }
#kindAds .adpicks .none { font-size: 13px; color: var(--text-muted); }
#kindAds textarea { font: inherit; font-size: 14px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; min-height: 76px; resize: vertical; }
#kindAds textarea:focus { outline: none; border-color: var(--accent); }
#kindAds .adhint { margin: -4px 0 0; font-size: 12.5px; color: var(--text-muted); }
#kindAds .adactions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#kindAds #adResult { font-size: 13.5px; }
#kindAds #adResult.ok { color: var(--good); }
#kindAds #adResult.err { color: var(--bad); }
@media (max-width: 760px) {
  #kindAds .adrules ul { grid-template-columns: 1fr; }
  #kindAds .offergrid { grid-template-columns: 1fr; }
}