/* Characters › By Traits (ninja-traits.js), and the live inscription on a Ninja's showcase page
   (ninja-ordinals.js). Builds on wiki.css's variables and gallery styles. */

/* The trait sidebar sits in a right column that runs the panel's full height; its list sticks to
   the top of the scrolling wiki and scrolls on its own. */
#ninja-gallery-panel.ninja-traits-panel { position:relative; padding-right:316px; min-height:calc(100dvh - 220px); }
.ninja-traits-panel .ninja-grid { grid-template-columns:repeat(6, minmax(0, 1fr)); }
.ninja-traits-nav { position:absolute; top:0; right:0; bottom:0; width:292px; }
.ninja-traits-nav-inner { position:sticky; top:16px; max-height:calc(100dvh - 56px); overflow-y:auto; overscroll-behavior:contain; padding:0 6px 24px 2px; box-sizing:border-box; scrollbar-width:thin; scrollbar-color:#3a3733 transparent; }
/* The search box, and an open box's title, stay in view while the list scrolls. */
.ninja-traits-findbox { position:sticky; top:0; z-index:2; padding:2px 0 12px; background:var(--wiki-bg); }
.ninja-traits-findbox svg { position:absolute; left:15px; top:14.5px; width:17px; height:17px; fill:none; stroke:var(--wiki-muted); stroke-width:1.8; stroke-linecap:round; pointer-events:none; }
.ninja-traits-findbox:focus-within svg { stroke:var(--wiki-text); }
.ninja-traits-find { display:block; width:100%; height:42px; box-sizing:border-box; margin:0; padding:0 14px 0 42px; border:1px solid #393630; border-radius:999px; background:#1d1c1a; color:var(--wiki-text); font:15px/1.3 -apple-system, "Segoe UI", sans-serif; }
.ninja-traits-find::placeholder { color:var(--wiki-muted); opacity:1; }
.ninja-traits-find:focus { border-color:var(--wiki-yellow); outline:none; }
/* Color swatches drop under the search box while it has focus. */
.ninja-traits-colors { position:absolute; left:0; right:0; top:calc(100% - 6px); display:none; grid-template-columns:repeat(12, 1fr); gap:4px; padding:8px; border:1px solid #393630; border-radius:12px; background:#1d1c1a; box-shadow:0 10px 24px rgba(0,0,0,.45); }
.ninja-traits-findbox:focus-within .ninja-traits-colors { display:grid; }
.ninja-traits-color { aspect-ratio:1; width:100%; margin:0; padding:0; border:1px solid rgba(255,255,255,.18); border-radius:5px; cursor:pointer; }
.ninja-traits-color:hover { transform:scale(1.08); border-color:var(--wiki-text); }
.ninja-traits-color:focus-visible { outline:2px solid var(--wiki-yellow); outline-offset:2px; }
.ninja-traits-empty { margin:16px 4px; font-size:14px; }

/* Each slot is a box that opens to list its traits. */
.ninja-traits-slot { margin:0 0 8px; border:1px solid #393630; border-radius:12px; background:#1a1917; }
.ninja-traits-slot > summary { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:11px; color:var(--wiki-text); list-style:none; cursor:pointer; }
.ninja-traits-slot > summary::-webkit-details-marker { display:none; }
.ninja-traits-slot > summary::after { content:''; flex:none; width:7px; height:7px; margin:0 3px 3px 2px; border:solid var(--wiki-muted); border-width:0 2px 2px 0; transform:rotate(45deg); }
.ninja-traits-slot[open] > summary { position:sticky; top:56px; z-index:1; background:#1a1917; }
.ninja-traits-slot[open] > summary::after { margin:3px 3px 0 2px; transform:rotate(-135deg); }
.ninja-traits-slot > summary:hover { background:#232220; }
.ninja-traits-slot > summary:focus-visible { outline:2px solid var(--wiki-yellow); outline-offset:-2px; }
.ninja-traits-slot-name { flex:1; min-width:0; font:900 15px/1.2 var(--wiki-display); letter-spacing:.08em; text-transform:uppercase; }
.ninja-traits-slot-rows { display:grid; gap:2px; padding:0 6px 8px; }

.ninja-trait-row { display:flex; align-items:center; gap:10px; width:100%; min-width:0; padding:4px 8px 4px 4px; border:1px solid transparent; border-radius:10px; background:none; color:var(--wiki-text); font:600 15px/1.25 -apple-system, "Segoe UI", sans-serif; text-align:left; cursor:pointer; }
.ninja-trait-row:hover { background:#232220; }
.ninja-trait-row.is-current { border-color:var(--wiki-yellow); background:#ffc7001a; }
.ninja-trait-name { flex:1; min-width:0; overflow-wrap:anywhere; }
.ninja-trait-tag { display:inline-block; margin-left:4px; padding:2px 6px; border-radius:6px; background:#ffc70026; color:var(--wiki-yellow); font:700 11px/1.2 -apple-system, "Segoe UI", sans-serif; letter-spacing:.04em; text-transform:uppercase; vertical-align:2px; }
.ninja-trait-count { flex:none; color:var(--wiki-muted); font:500 13px/1 -apple-system, "Segoe UI", sans-serif; font-variant-numeric:tabular-nums; }
.ninja-trait-thumb { flex:none; width:40px; height:40px; box-sizing:border-box; padding:3px; border-radius:8px; background:#6b6966; object-fit:contain; }

/* A trait's page: breadcrumb, title, then its category or group and its colors as tabs. */
.ninja-traits-page { margin:0 0 20px; }
.ninja-traits-crumbs { margin:0 0 10px; color:var(--wiki-muted); font-size:13px; }
.ninja-traits-crumbs button { padding:0; border:0; background:none; color:var(--wiki-yellow); font:inherit; cursor:pointer; }
.ninja-traits-crumbs button:hover { text-decoration:underline; }
.ninja-traits-title { display:flex; align-items:center; gap:16px; margin:0 0 16px; }
.ninja-traits-title .ninja-view-title { margin:0; }
.ninja-traits-title .ninja-view-description { margin:4px 0 0; }
/* Toggles that order the cards, at the right of the title. */
.ninja-traits-sorts { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; margin-left:auto; }
.ninja-traits-sort { padding:7px 12px; border:1px solid #393630; border-radius:999px; background:#1d1c1a; color:var(--wiki-text); font:600 13px/1.2 -apple-system, "Segoe UI", sans-serif; cursor:pointer; }
.ninja-traits-sort:hover { border-color:#6b5a26; }
.ninja-traits-sort[aria-pressed="true"] { border-color:var(--wiki-yellow); background:#ffc7001a; color:var(--wiki-yellow); }
.ninja-traits-sort:focus-visible { outline:2px solid var(--wiki-yellow); outline-offset:2px; }
/* A Special trait says what sets its Ninjas apart. */
.ninja-traits-about { max-width:640px; margin:-4px 0 16px; color:var(--wiki-muted); font:15px/1.45 -apple-system, "Segoe UI", sans-serif; }
.ninja-trait-thumb.is-large { width:72px; height:72px; padding:6px; border-radius:14px; }
.ninja-traits-family { margin:0 0 14px; }
.ninja-traits-family-label { margin:0 0 8px; color:var(--wiki-muted); font:900 13px/1.2 var(--wiki-display); letter-spacing:.1em; text-transform:uppercase; }
.ninja-traits-tabs { display:flex; flex-wrap:wrap; gap:6px; }
.ninja-traits-tab { display:inline-flex; align-items:center; gap:8px; padding:4px 12px 4px 4px; border:1px solid #393630; border-radius:10px; background:#1d1c1a; color:var(--wiki-text); font:600 14px/1.2 -apple-system, "Segoe UI", sans-serif; cursor:pointer; }
.ninja-traits-tab:hover { border-color:#6b5a26; }
.ninja-traits-tab.is-current { border-color:var(--wiki-yellow); background:#ffc7001a; }
.ninja-traits-tab .ninja-trait-thumb { width:30px; height:30px; padding:2px; border-radius:6px; }

@media (max-width: 1100px) {
  .ninja-traits-panel .ninja-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
/* Narrow screens put the sidebar above the page. */
@media (max-width: 900px) {
  #ninja-gallery-panel.ninja-traits-panel { padding-right:0; min-height:0; }
  .ninja-traits-nav { position:static; width:auto; margin:0 0 20px; }
  .ninja-traits-nav-inner { position:static; max-height:none; overflow:visible; padding:0; }
  .ninja-traits-slot-rows { max-height:46vh; overflow-y:auto; overscroll-behavior:contain; }
  .ninja-traits-panel .ninja-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ninja-traits-title { flex-wrap:wrap; }
  .ninja-traits-sorts { justify-content:flex-start; width:100%; margin-left:0; }
  .ninja-traits-panel .ninja-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ninja-traits-slot > summary { padding:10px 12px; }
  .ninja-trait-thumb.is-large { width:56px; height:56px; }
}

/* The live inscription fills the showcase art square. Its own menu and download buttons sit at
   the top right, clear of the level badge in the top left. */
.ninja-live-inscription { aspect-ratio:1; }
.ninja-live-inscription iframe { display:block; width:100%; height:100%; border:0; background:#ff5100; }