/* "SKIN ANFRAGEN": Tier-4-Patreon skin requests. Loaded after the studio's
   component styles. Never touches #fi-publish-fab's own rules: the request
   pin sits beside it through the adjacent-sibling selector, and the module
   refines the spot from what is really rendered. */

/* The request pin: the publish pin's rule block, copied. */
#skinreq-fab{position:absolute;top:172px;left:16px;z-index:60;cursor:pointer;
  font-family:'VT323',ui-monospace,monospace;font-size:16px;letter-spacing:.1em;
  color:#ffd9ae;padding:10px 16px;border-radius:10px;
  background:linear-gradient(180deg,rgba(255,170,90,.26),rgba(255,140,60,.1));
  border:1px solid rgba(255,190,110,.55);
  box-shadow:0 6px 26px -10px rgba(255,150,60,.55), inset 0 0 18px rgba(255,170,90,.08);
  transition:transform .15s, box-shadow .2s, background .2s}
#skinreq-fab:hover{transform:translateY(-1px);
  background:linear-gradient(180deg,rgba(255,180,100,.36),rgba(255,150,70,.16));
  box-shadow:0 10px 32px -10px rgba(255,160,70,.7), inset 0 0 22px rgba(255,180,100,.12)}
#skinreq-fab:focus-visible{outline:2px solid #ffd9ae;outline-offset:2px}
#skinreq-fab[hidden]{display:none}

/* Publish pin visible (staff): the request pin sits to its RIGHT, same top.
   LEFT = 16px + the publish pin's rendered width at 1366x768 (268px) + 10px.
   The module re-measures at runtime (a late or missing web font changes the
   width) and moves the pin where the open deck is in the way. Publish pin
   hidden (players, signed out): the request pin takes its place at 16px. */
#fi-publish-fab:not([hidden]) + #skinreq-fab{left:294px}

@media (max-width:760px),(max-width:920px) and (max-height:650px){
  /* Phones, and short windows up to 920px wide (a phone held sideways, a
     small desktop window): the publish pin's spot lies under the deck or
     below the visible stage, so the request pin, which every player needs,
     sits top-left under the SKIN-STUDIO title instead, same size as the
     publish pin's phone rule. */
  #skinreq-fab{top:64px;left:10px;bottom:auto;font-size:14px;padding:8px 12px}
  #fi-publish-fab:not([hidden]) + #skinreq-fab{left:10px}
}

/* Where the deck covers the pin's every spot (a phone held sideways), the
   module lifts the pin out of the stage: just above the deck (24), below
   the drawer (30/31), the toasts and every dialog. */
#skinreq-fab.skinreq-lifted{z-index:25}

/* The request dialog reuses the suggest dialog's .sg-* system; only the
   status line and the locked state are new. */
#skinreq-wrap[hidden],#my-skinrequests[hidden],#skinreq-status[hidden]{display:none!important}
#skinreq-wrap .skinreq-status{margin:0 0 12px;padding:9px 11px;border-radius:8px;font-size:12.5px;line-height:1.5;
  border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.28)}
#skinreq-wrap .skinreq-status[data-kind="err"]{border-color:rgba(224,133,133,.55);color:#ffb1b6;background:rgba(224,133,133,.08)}
#skinreq-wrap .skinreq-status[data-kind="warn"]{border-color:rgba(232,194,104,.55);color:#e8c268;background:rgba(232,194,104,.08)}
#skinreq-wrap .skinreq-status[data-kind="ok"]{border-color:rgba(95,212,168,.5);color:#5fd4a8}
#skinreq-wrap .skinreq-status a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;margin-left:6px;white-space:nowrap}
#skinreq-wrap[data-locked="1"] .fp-row{opacity:.5}
#skinreq-wrap button:disabled{opacity:.5;cursor:not-allowed}

/* "Meine Skin-Anfragen" - the #my-suggestions row shape. */
#my-skinrequests .skinreq-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:7px 4px;border-bottom:1px solid rgba(255,255,255,.05);font-size:12px}
#my-skinrequests .skinreq-row:last-child{border-bottom:0}
#my-skinrequests .skinreq-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#my-skinrequests .skinreq-species{opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#my-skinrequests .skinreq-state{font-family:var(--mono,monospace);font-size:10px;letter-spacing:.12em;padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.16);justify-self:end;white-space:nowrap;text-transform:uppercase}
#my-skinrequests .skinreq-state.pending{color:#e8c268;border-color:rgba(232,194,104,.45)}
#my-skinrequests .skinreq-state.approved{color:#5fd4a8;border-color:rgba(95,212,168,.45)}
#my-skinrequests .skinreq-state.rejected{color:#e08585;border-color:rgba(224,133,133,.4)}
#my-skinrequests .skinreq-sub{grid-column:1 / -1;font-size:11px;opacity:.7;line-height:1.4}
#my-skinrequests .skinreq-sub:empty{display:none}
#my-skinrequests .skinreq-sub a{color:#5fd4a8}
#my-skinrequests .skinreq-paused{display:inline-block;padding:1px 7px;border-radius:9px;border:1px solid rgba(232,194,104,.45);color:#e8c268;background:rgba(232,194,104,.08);font-size:10.5px;letter-spacing:.06em}