/* Stygian Realms Tools — Shared Styles (v1)
   Scope: only affects elements inside .sr-tool or #sr-npc-tool
*/

/* ---- Base tool shell ---- */
.sr-tool, .sr-tool * ,
#sr-npc-tool, #sr-npc-tool * { box-sizing: border-box; }

/* NPC tool theme tokens + base */
#sr-npc-tool.sr-npc{
  --bg:#0d0d0d;
  --panel:#15110c;
  --panel2:#100d09;
  --line:#3d3428;

  --gold:#c9a962;
  --text:#e8e4dc;
  --muted:#a09080;
  --muted2:#8b8072;

  --good:#4ade80;
  --bad:#f87171;
}

/* ---- Wrapper ---- */
#sr-npc-tool .sr-npc__wrap{
  max-width:900px;
  margin:0 auto;
  padding:1.25rem;
  color:var(--text);
  background:
    radial-gradient(ellipse at top, #1a1510 0%, transparent 55%),
    radial-gradient(ellipse at bottom, #0d0a08 0%, transparent 55%);
  border:1px solid var(--line);
  overflow: visible;
}

/* ---- Header ---- */
#sr-npc-tool .sr-npc__header{
  text-align:center;
  padding:1.25rem;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#1a1510 0%, #0d0d0d 100%);
  margin-bottom:1rem;
}
#sr-npc-tool .sr-npc__title{
  margin:0;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--gold);
  font-size:1.7rem;
}
#sr-npc-tool .sr-npc__subtitle{
  margin:.35rem 0 0;
  color:var(--muted2);
  font-style:italic;
}

/* ---- Controls ---- */
#sr-npc-tool .sr-npc__controls{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin:1rem 0;
}
#sr-npc-tool .sr-npc__btn{
  border:1px solid var(--line);
  background:transparent;
  color:var(--gold);
  padding:.7rem .9rem;
  cursor:pointer;
  transition:.2s;
  font-weight:650;
}
#sr-npc-tool .sr-npc__btn:hover{ background:rgba(201,169,98,0.08); }
#sr-npc-tool .sr-npc__btn:disabled{ opacity:.45; cursor:not-allowed; }
#sr-npc-tool .sr-npc__btn--primary{
  background:rgba(201,169,98,0.12);
  border-color:rgba(201,169,98,0.35);
}

/* ---- Status ---- */
#sr-npc-tool .sr-npc__status{
  display:flex;
  align-items:center;
  gap:.5rem;
  color:var(--muted2);
  padding:.5rem .1rem;
}
#sr-npc-tool .sr-npc__status-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--muted2);
  display:inline-block;
}

/* ---- Card ---- */
#sr-npc-tool .sr-npc__card{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(21,17,12,0.85), rgba(13,13,13,0.9));
  padding:1rem;
}
#sr-npc-tool .sr-npc__card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  flex-wrap:wrap;
}
#sr-npc-tool .sr-npc__top-left{ min-width:0; }
#sr-npc-tool .sr-npc__name{
  font-size:1.55rem;
  font-weight:900;
  letter-spacing:.03em;
  color:var(--gold);
}
#sr-npc-tool .sr-npc__coreline{
  color:var(--muted);
  margin-top:.2rem;
}

/* ---- Brag box ---- */
#sr-npc-tool .sr-npc__brag{
  text-align:right;
  border:1px solid var(--line);
  padding:.6rem .75rem;
  background:rgba(0,0,0,0.25);
}
#sr-npc-tool .sr-npc__brag-label{
  color:var(--muted2);
  text-transform:uppercase;
  font-size:.75rem;
  letter-spacing:.12em;
}
#sr-npc-tool .sr-npc__brag-value{
  font-size:1.05rem;
  font-weight:800;
  margin-top:.1rem;
}
#sr-npc-tool .sr-npc__brag-sub{
  color:var(--muted2);
  font-size:.85rem;
  margin-top:.15rem;
}

/* ---- Sections ---- */
#sr-npc-tool .sr-npc__sections{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin-top:1rem;
}
#sr-npc-tool .sr-npc__section{
  border:1px solid var(--line);
  background:rgba(0,0,0,0.18);
  padding:.75rem;
  min-width:0;
}

/* Section headers as headers */
#sr-npc-tool .sr-npc__section-head{
  display:block;
  padding:0 0 10px 0;
  margin:0 0 12px 0;
  border-bottom:1px solid rgba(209,170,97,0.18);
}
#sr-npc-tool .sr-npc__section-head h3{
  margin:0;
  text-align:left;
  font-size:.95rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(209,170,97,0.95);
}
#sr-npc-tool .sr-npc__mini{
  margin-top:.55rem;
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  padding:.35rem .55rem;
  cursor:pointer;
}
#sr-npc-tool .sr-npc__mini:hover{
  background:rgba(201,169,98,0.08);
  color:var(--gold);
}

/* ---- Rows ---- */
#sr-npc-tool .sr-npc__rows{
  display:grid;
  gap:.45rem;
  width:100%;
  max-width:none;
  min-width:0;
}

/* Desktop row layout */
#sr-npc-tool .sr-npc__row{
  display:grid;
  grid-template-columns: 140px minmax(0, 1fr) 90px 46px;
  gap:.6rem;
  align-items:center;
  padding:.35rem .25rem;
  border-bottom:1px dashed rgba(61,52,40,0.55);
  min-width:0;
}
#sr-npc-tool .sr-npc__row:last-child{ border-bottom:none; }

#sr-npc-tool .sr-npc__label{
  color:var(--muted2);
  font-size:.9rem;
  text-align:left;
}
#sr-npc-tool .sr-npc__value{
  color:var(--text);
  font-size:.95rem;
  text-align:left;
  min-width:0;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:auto;
  line-height:1.25;
}
#sr-npc-tool .sr-npc__rarity{
  text-align:right;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  font-size:.85rem;
}
#sr-npc-tool .sr-npc__lock{
  width:40px;
  height:32px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted2);
  cursor:pointer;
}
#sr-npc-tool .sr-npc__lock.is-locked{
  border-color:var(--gold);
  color:var(--gold);
  background:rgba(201,169,98,0.08);
}

/* ---- Actions / Email ---- */
#sr-npc-tool .sr-npc__actions{
  margin-top:1rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
#sr-npc-tool .sr-npc__email{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}
#sr-npc-tool .sr-npc__input{
  flex:1;
  min-width:220px;
  padding:.65rem .75rem;
  border:1px solid var(--line);
  background:#0b0b0b;
  color:var(--text);
}
#sr-npc-tool .sr-npc__disclaimer{
  color:var(--muted2);
  font-size:.8rem;
  line-height:1.3;
}

/* ---- Mobile refinements ---- */
@media (max-width: 520px){
  #sr-npc-tool .sr-npc__section{ padding: 0.5rem; }

  #sr-npc-tool .sr-npc__row{
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "label label label"
      "value rarity lock";
    align-items: center;
    row-gap: 0.25rem;
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid rgba(61,52,40,0.35);
  }

  #sr-npc-tool .sr-npc__label{
    grid-area: label;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
  }

  #sr-npc-tool .sr-npc__value{
    grid-area: value;
    font-size: 0.95rem;
    line-height: 1.25;
  }

  #sr-npc-tool .sr-npc__rarity{
    grid-area: rarity;
    font-size: 0.8rem;
    text-align: right;
    padding-left: 0.5rem;
    white-space: nowrap;
  }

  #sr-npc-tool .sr-npc__lock{
    grid-area: lock;
    width: 36px;
    height: 30px;
  }
}