/* ==========================================================================
   SilverMU inner pages: /npcs (NPCs and Shops, npcs.php, added 2026-11-07).
   Loaded right after css/silver-inner.css, in the same layer and with the same mechanic: every rule sits in
   @layer sv-inner, every declaration carries !important, every selector is scoped under body.svp-inner--npcs.
   Masthead, panels, heads and chips come from silver-inner.css; this sheet adds the town chips, the shop cards
   with their item rows, and the grid of the other NPCs. No opacity, transform, transition or animation on
   sections or .white-box (fx.js owns those) and no display rules on <details> content.
   ========================================================================== */
@layer sv-inner {
  /* The shared sheet caps lists in panels at the prose measure: these two lists are layouts, not prose */
  body.svp-inner--npcs .svp-npc-towns,
  body.svp-inner--npcs .svp-npc-others {
    max-width: none !important;
  }

  /* Town chips under "Shops by town" */
  body.svp-inner--npcs .svp-npc-towns {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--svp-2) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  body.svp-inner--npcs .svp-npc-towns a.svp-chip {
    text-decoration: none !important;
  }
  body.svp-inner--npcs .svp-npc-towns__n {
    margin-left: 4px !important;
    color: var(--svp-ink-faint) !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* Shop cards */
  body.svp-inner--npcs .svp-npc-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)) !important;
    gap: var(--svp-4) !important;
    align-items: start !important;
  }
  body.svp-inner--npcs .svp-npc {
    display: grid !important;
    gap: var(--svp-3) !important;
    min-width: 0 !important;
    padding: var(--svp-4) !important;
    border-radius: var(--svp-r-sm) !important;
    background: var(--svp-well) !important;
    box-shadow: inset 0 0 0 1px var(--svp-line) !important;
    scroll-margin-top: 96px !important;
  }
  body.svp-inner--npcs .svp-npc__head {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: var(--svp-3) !important;
    align-items: center !important;
  }
  body.svp-inner--npcs .svp-npc__art {
    display: grid !important;
    grid-template: 100% / 100% !important;
    place-items: center !important;
    box-sizing: border-box !important;
    width: 72px !important;
    height: 72px !important;
    padding: 4px !important;
    overflow: hidden !important;
    border-radius: var(--svp-r-ctl) !important;
    background:
      radial-gradient(circle at 50% 40%, rgba(124, 200, 255, 0.13), rgba(124, 200, 255, 0) 70%),
      rgba(4, 6, 11, 0.55) !important;
    box-shadow: inset 0 0 0 1px var(--svp-frame) !important;
  }
  body.svp-inner--npcs .svp-npc__art img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6)) !important;
  }
  body.svp-inner--npcs .svp-npc__glyph {
    width: 40% !important;
    height: 40% !important;
    clip-path: var(--svp-diamond) !important;
    background: rgba(163, 173, 191, 0.28) !important;
  }
  body.svp-inner--npcs .svp-npc__id {
    min-width: 0 !important;
  }
  body.svp-inner--npcs .svp-npc__name {
    margin: 0 !important;
    font: 600 17px/1.2 var(--svp-font-display) !important;
    color: var(--svp-head) !important;
  }
  body.svp-inner--npcs .svp-npc__shelf {
    margin: 4px 0 0 !important;
    font: 500 12px/1.3 var(--sv-font-ui) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--svp-kicker) !important;
  }
  body.svp-inner--npcs .svp-npc__count {
    color: var(--svp-ink-faint) !important;
  }
  body.svp-inner--npcs .svp-npc__where {
    margin: 4px 0 0 !important;
    font: 400 14px/1.4 var(--sv-font-body) !important;
    color: var(--svp-ink-muted) !important;
  }
  body.svp-inner--npcs .svp-npc__vip {
    margin: 4px 0 0 !important;
    font: 500 12px/1.3 var(--sv-font-ui) !important;
    color: var(--svp-warn-ink) !important;
  }

  /* Item rows */
  body.svp-inner--npcs .svp-npc__items {
    display: grid !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  body.svp-inner--npcs .svp-npc-item {
    display: flex !important;
    align-items: center !important;
    gap: var(--svp-3) !important;
    min-height: 42px !important;
    padding: 4px 6px !important;
    border-radius: 6px !important;
    color: var(--svp-ink) !important;
    text-decoration: none !important;
  }
  body.svp-inner--npcs .svp-npc-item:hover,
  body.svp-inner--npcs .svp-npc-item:focus-visible {
    background: rgba(255, 255, 255, 0.05) !important;
  }
  body.svp-inner--npcs .svp-npc-item__icon {
    flex: none !important;
    display: grid !important;
    grid-template: 100% / 100% !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
  }
  body.svp-inner--npcs .svp-npc-item__icon img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)) !important;
  }
  body.svp-inner--npcs .svp-npc-item__txt {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
  }
  body.svp-inner--npcs .svp-npc-item__name {
    font: 500 15px/1.25 var(--sv-font-body) !important;
    color: var(--svp-link) !important;
  }
  body.svp-inner--npcs .svp-npc-item:hover .svp-npc-item__name,
  body.svp-inner--npcs .svp-npc-item:focus-visible .svp-npc-item__name {
    color: var(--svp-ink-strong) !important;
  }
  body.svp-inner--npcs .svp-npc-item__opts {
    font: 500 11.5px/1.25 var(--sv-font-ui) !important;
    letter-spacing: 0.04em !important;
    color: var(--svp-ink-faint) !important;
  }
  body.svp-inner--npcs .svp-npc__more > summary {
    cursor: pointer !important;
    padding: 6px !important;
    font: 600 12px/1.2 var(--sv-font-ui) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--svp-ice) !important;
  }
  body.svp-inner--npcs .svp-npc__more > summary:hover,
  body.svp-inner--npcs .svp-npc__more > summary:focus-visible {
    color: var(--svp-ink-strong) !important;
  }

  /* Other town NPCs */
  body.svp-inner--npcs .svp-npc-others {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)) !important;
    gap: var(--svp-3) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  body.svp-inner--npcs .svp-npc-other {
    display: grid !important;
    justify-items: center !important;
    align-content: start !important;
    gap: 6px !important;
    padding: var(--svp-4) var(--svp-3) !important;
    border-radius: var(--svp-r-sm) !important;
    text-align: center !important;
    background: var(--svp-well) !important;
    box-shadow: inset 0 0 0 1px var(--svp-line) !important;
  }
  body.svp-inner--npcs .svp-npc__art--lg {
    width: 112px !important;
    height: 112px !important;
    padding: 6px !important;
  }
  body.svp-inner--npcs .svp-npc-other__name {
    font: 600 16px/1.2 var(--svp-font-display) !important;
    color: var(--svp-head) !important;
  }
  body.svp-inner--npcs .svp-npc-other__where {
    font: 400 13.5px/1.4 var(--sv-font-body) !important;
    color: var(--svp-ink-muted) !important;
  }

  @media (max-width: 600px) {
    body.svp-inner--npcs .svp-npc {
      padding: var(--svp-3) !important;
    }
    body.svp-inner--npcs .svp-npc__head {
      grid-template-columns: 60px minmax(0, 1fr) !important;
    }
    body.svp-inner--npcs .svp-npc__head .svp-npc__art {
      width: 60px !important;
      height: 60px !important;
    }
  }
}