/* Black & White inventory browser. Loaded after the shared wiki styles. */
body.bw-items-page .content-grid.article-layout {
  grid-template-columns: minmax(0, 1fr);
}

body.bw-items-page .article-layout > .right-rail {
  display: none;
}

body.bw-items-page .article-layout > .bw-items-browser {
  --bw-items-bg: #1d1e20;
  --bw-items-raised: #242529;
  --bw-items-line: #38393e;
  --bw-items-text: #efedf5;
  --bw-items-muted: #aeb0ba;
  --bw-items-accent: #d6a0ed;
  --bw-items-purple: #8b5cf6;
  min-width: 0;
  padding: 24px;
  border-color: var(--bw-items-line);
  border-radius: 8px;
  background: var(--bw-items-bg);
  color: var(--bw-items-text);
  box-shadow: none;
}

.bw-items-page .bw-items-browser h1 {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  color: var(--bw-items-text);
  font: 700 clamp(25px, 2.2vw, 32px)/1.25 'Source Sans 3', Arial, sans-serif;
  letter-spacing: -.5px;
}

.bw-items-page .bw-items-browser .bw-items-intro {
  max-width: 900px;
  margin: 0 0 22px;
  color: var(--bw-items-muted);
  font-size: 15px;
  line-height: 1.6;
}

.bw-items-browser a { color: var(--bw-items-accent); }
.bw-items-browser a:hover { color: #e6ddff; }

.bw-items-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 14px;
}

.bw-items-toolbar button,
.bw-items-toolbar select,
.bw-items-toolbar summary,
.bw-items-search,
.bw-items-views button,
#bw-items-empty button {
  min-height: 40px;
  border: 1px solid var(--bw-items-line);
  border-radius: 6px;
  background: var(--bw-items-raised);
  color: var(--bw-items-text);
  font: inherit;
}

.bw-items-search {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 250px;
  min-width: min(100%, 220px);
  padding: 0 12px;
}

.bw-items-search svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: #a6a1b2;
}

.bw-items-search input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--bw-items-text);
  font: inherit;
}

.bw-items-search input::placeholder { color: #a6a1b2; }
.bw-items-search:focus-within { border-color: var(--bw-items-purple); }
.bw-items-toolbar select { min-width: 150px; padding: 8px 28px 8px 11px; cursor: pointer; }
.bw-items-toolbar button { padding: 7px 12px; cursor: pointer; }

.bw-items-filter { position: relative; }
.bw-items-filter summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 17px;
  padding: 8px 12px;
  list-style: none;
  cursor: pointer;
}

.bw-items-filter summary::-webkit-details-marker { display: none; }
.bw-items-filter summary > span[aria-hidden='true'] { display: none; }
.bw-items-filter summary::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.bw-items-filter[open] summary {
  border-color: var(--bw-items-purple);
  background: #302743;
  color: #ded2ff;
}

.bw-items-filter[open] summary::after { margin-top: 3px; transform: rotate(225deg); }
.bw-items-filter-options {
  position: absolute;
  z-index: 12;
  top: calc(100% + 7px);
  left: 0;
  width: 235px;
  max-width: calc(100vw - 52px);
  max-height: 340px;
  overflow-y: auto;
  min-inline-size: 0;
  margin: 0;
  padding: 7px;
  border: 1px solid #4a405e;
  border-radius: 7px;
  background: #242127;
  box-shadow: 0 12px 28px #0007;
}

.bw-items-filter-options label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 35px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.bw-items-filter-options label:hover { background: #35303d; }
.bw-items-filter-options label small { margin-left: auto; color: #9791a4; font-size: 11px; }
.bw-items-toolbar input[type='checkbox'] {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin: 0;
  accent-color: var(--bw-items-purple);
  cursor: pointer;
}

.bw-items-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: #c9c5d2;
  cursor: pointer;
  white-space: nowrap;
}

.bw-items-toggle input[role='switch'] {
  appearance: none;
  position: relative;
  width: 28px;
  height: 16px;
  flex-basis: 28px;
  border: 0;
  border-radius: 10px;
  background: #56545c;
}
.bw-items-toggle input[role='switch']::after { content: ''; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: #f5f1f8; }
.bw-items-toggle input[role='switch']:checked { background: var(--bw-items-purple); }
.bw-items-toggle input[role='switch']:checked::after { left: 15px; }

#bw-items-reset { color: var(--bw-items-muted); background: transparent; }
.bw-items-toolbar button:hover,
.bw-items-toolbar select:hover,
.bw-items-filter summary:hover,
.bw-items-views button:hover,
#bw-items-empty button:hover { border-color: #716285; background: #302b38; }

.bw-items-browser :is(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--bw-items-accent);
  outline-offset: 3px;
}

.bw-items-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 12px;
}

.bw-items-page #bw-items-count { margin: 0; color: var(--bw-items-muted); font-size: 13px; }
.bw-items-page #bw-items-count strong { padding: 2px 5px; border-radius: 3px; background: #d6a0ed; color: #242029; font-weight: 600; }
.bw-items-views { display: flex; gap: 4px; }
.bw-items-views button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}

.bw-items-views svg { width: 16px; height: 16px; }
.bw-items-views button[aria-pressed='true'] { border-color: #8b6bbd; background: #3b2e51; color: #e1d4ff; }
.bw-items-results { min-width: 0; max-width: 100%; border: 1px solid var(--bw-items-line); border-radius: 7px; }
.bw-items-table { width: 100%; table-layout: fixed; border-collapse: collapse; text-align: left; font-size: 13px; line-height: 1.55; }
.bw-items-table th,
.bw-items-table td { padding: 14px 15px; border-bottom: 1px solid var(--bw-items-line); vertical-align: middle; overflow-wrap: anywhere; }
.bw-items-table thead th { padding-top: 11px; padding-bottom: 11px; background: #242529; color: #c1bacd; font-weight: 600; font-size: 12px; }
.bw-items-table thead th:first-child { width: 20%; border-radius: 6px 0 0 0; }
.bw-items-table thead th:nth-child(2) { width: 13%; }
.bw-items-table thead th:nth-child(3) { width: 23%; }
.bw-items-table thead th:nth-child(4) { width: 5%; padding-left: 5px; padding-right: 5px; }
.bw-items-table thead th:last-child { width: 39%; border-radius: 0 6px 0 0; }
.bw-items-browser .bw-items-sort-button { display: inline-flex; align-items: center; gap: 7px; min-height: 20px; padding: 0; border: 0; border-radius: 2px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.bw-items-browser .bw-items-sort-button:hover { color: var(--bw-items-accent); }
.bw-items-sort-button span { color: #98919f; }
.bw-items-table tbody tr { background: #1d1e20; }
.bw-items-table tbody tr:nth-child(even) { background: #242529; }
.bw-items-table tbody tr:hover { background: #29252f; }
.bw-items-table tbody tr:target { background: #362c43; outline: 1px solid #8b6bbd; outline-offset: -1px; }
.bw-items-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.bw-item-name { text-align: left; font-weight: 600; }
.bw-item-name > div { overflow: hidden; }
.bw-item-name img { float: left; width: 32px; height: 32px; margin: 0 10px 0 0; object-fit: contain; image-rendering: pixelated; }
.bw-item-missing { display: inline-grid; float: left; place-items: center; width: 32px; height: 32px; margin-right: 10px; border: 1px solid #51465e; border-radius: 5px; color: #bdafca; font-size: 17px; font-weight: 400; }
.bw-item-name a { font-size: 14px; line-height: 1.45; }
.bw-item-number { display: block; margin-top: 2px; color: #9791a4; font-size: 11px; font-weight: 400; }
.bw-item-move { display: block; margin-top: 3px; color: #beb6ca; font-size: 12px; font-weight: 400; }
.bw-pocket { display: inline-block; padding: 2px 7px; border: 1px solid #4b405c; border-radius: 4px; background: #322a40; color: #d9ccec; font-size: 11px; line-height: 1.45; white-space: normal; }
.bw-item-location { color: #cfccd6; }
.bw-item-availability { display: block; width: fit-content; margin-top: 6px; padding: 2px 6px; border: 1px solid #5c4d38; border-radius: 3px; color: #dbc39d; font-size: 10px; line-height: 1.5; }
.bw-items-table .bw-item-cost { padding-left: 5px; padding-right: 5px; color: #ddd8e7; font-variant-numeric: tabular-nums; }
.bw-item-description { color: #bdb9c8; }

.bw-items-results[data-view='grid'] { border: 0; }
.bw-items-results[data-view='grid'] .bw-items-table { display: block; }
.bw-items-results[data-view='grid'] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.bw-items-results[data-view='grid'] tbody { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bw-items-results[data-view='grid'] .bw-item { display: flex; flex-direction: column; min-width: 0; padding: 15px; border: 1px solid var(--bw-items-line); border-radius: 7px; background: #202025; }
.bw-items-results[data-view='grid'] :is(th, td) { display: block; width: auto; padding: 0; border: 0; }
.bw-items-results[data-view='grid'] .bw-item-name { min-height: 38px; margin-bottom: 12px; }
.bw-items-results[data-view='grid'] .bw-item-name img { margin-right: 10px; }
.bw-items-results[data-view='grid'] td { margin-top: 10px; font-size: 13px; }
.bw-items-results[data-view='grid'] td::before { content: attr(data-label); display: block; margin-bottom: 3px; color: #9d96ab; font-size: 10px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.bw-items-results[data-view='grid'] .bw-item-description { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--bw-items-line); }
.bw-items-results .bw-item[hidden],
.bw-items-browser [hidden] { display: none !important; }

#bw-items-empty { margin-top: 8px; padding: 38px 20px; border: 1px dashed #564665; border-radius: 7px; background: #211c28; text-align: center; color: var(--bw-items-muted); }
#bw-items-empty h2 { margin-bottom: 8px; color: #e5dcf3; font: 600 20px/1.3 'Source Sans 3', Arial, sans-serif; }
#bw-items-empty p { margin-bottom: 16px; }
#bw-items-empty button { padding: 8px 14px; cursor: pointer; }
.bw-items-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--bw-items-line); }
.bw-items-notes > h2:first-of-type { grid-column: 1; grid-row: 1; }
.bw-items-notes > p:first-of-type { grid-column: 1; grid-row: 2; }
.bw-items-notes > h2:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.bw-items-notes > p:nth-of-type(2) { grid-column: 2; grid-row: 2; }
.bw-items-notes > .bw-items-credit { grid-column: 1 / -1; }
.bw-items-page .bw-items-notes h2 { margin: 0 0 7px; padding: 0; border: 0; color: #dfd4ee; font: 600 17px/1.3 'Source Sans 3', Arial, sans-serif; }
.bw-items-page .bw-items-notes p { margin: 0 0 12px; color: var(--bw-items-muted); font-size: 13px; line-height: 1.65; }
.bw-items-browser .wiki-editorial-panel { border-color: var(--bw-items-line); }
.bw-items-browser .wiki-editorial-panel h2 { color: #dfd4ee; font-family: 'Source Sans 3', Arial, sans-serif; }

@media (max-width: 1100px) {
  .bw-items-table th, .bw-items-table td { padding: 12px 10px; }
  .bw-items-table thead th:first-child { width: 22%; }
  .bw-items-table thead th:nth-child(3) { width: 22%; }
  .bw-items-table thead th:nth-child(4) { width: 7%; }
  .bw-items-table thead th:last-child { width: 36%; }
  .bw-items-results[data-view='grid'] tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  body.bw-items-page .article-layout > .bw-items-browser { padding: 18px; }
  .bw-items-search { flex-basis: 100%; }
  .bw-items-toolbar select { flex: 1 1 130px; min-width: 0; }
  .bw-items-toolbar .bw-items-filter { flex: 1 1 120px; }
  .bw-items-table, .bw-items-table tbody { display: block; }
  .bw-items-results { border: 0; }
  .bw-items-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .bw-items-table .bw-item { display: block; min-width: 0; margin-bottom: 12px; padding: 15px; border: 1px solid var(--bw-items-line); border-radius: 7px; background: #202025; }
  .bw-items-table .bw-item-name { display: block; min-height: 38px; padding: 0 0 11px; border: 0; }
  .bw-items-table td { display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 5px 10px; padding: 8px 0; border: 0; font-size: 13px; }
  .bw-items-table td::before { content: attr(data-label); color: #9d96ab; font-size: 11px; font-weight: 600; }
  .bw-items-table .bw-item-description { display: block; margin-top: 7px; padding-top: 12px; border-top: 1px solid var(--bw-items-line); }
  .bw-items-table .bw-item-description::before { display: block; margin-bottom: 5px; }
  .bw-items-table .bw-item-cost { padding: 8px 0; }
  .bw-items-table .bw-item-availability { grid-column: 2; margin-top: 0; }
  .bw-items-table .bw-pocket { justify-self: start; }
  .bw-items-notes { grid-template-columns: 1fr; gap: 14px; }
  .bw-items-page .bw-items-notes > :is(h2, p) { grid-column: 1; grid-row: auto; }
  .bw-items-results[data-view='grid'] .bw-item { margin-bottom: 0; }
  .bw-items-results[data-view='grid'] td { display: block; }
}

@media (max-width: 460px) {
  body.bw-items-page .article-layout > .bw-items-browser { padding: 14px; }
  .bw-items-toolbar { gap: 8px; }
  .bw-items-toggle { flex: 1 1 auto; font-size: 12px; }
  .bw-items-views button { gap: 4px; padding: 6px 8px; }
  .bw-items-results[data-view='grid'] tbody { grid-template-columns: minmax(0, 1fr); }
  .bw-items-filter-options { width: 210px; }
  .bw-items-filter:nth-of-type(2) .bw-items-filter-options { left: auto; right: 0; }
}