/* Browser review refinements. Load after style.css. */
.source-category-header{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.source-category-header .category-tabs{flex:1;min-width:0;margin-bottom:0}.source-search-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:#713bce;border:1px solid #cbbbdc;border-radius:6px;background:#faf7fc;flex-shrink:0}.source-search-toggle svg{width:23px;height:23px}.source-global-search{display:flex;gap:12px;align-items:center;margin:18px 0}.source-global-search input{flex:1;min-width:0}.source-category-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;color:#6c627b;font-size:15px}.optional-rules fieldset{border:0;padding:0;margin:0}.optional-rules fieldset:disabled{opacity:.65}.build-dialog{width:min(600px,calc(100% - 32px));max-height:calc(100% - 40px);overflow:auto;border:1px solid #bba2d4;border-top:4px solid #713bce;border-radius:12px;padding:26px;color:#302638;background:#faf8fc;box-shadow:0 20px 70px #24123155}.build-dialog::backdrop{background:#20112c88}.build-dialog h2{margin-top:0;font-size:25px}.build-dialog p,.build-dialog li{font-size:17px;line-height:1.6}.build-dialog .button-group{justify-content:flex-end;margin-top:24px}.button.danger{background:#9b2856;color:white;border-color:#9b2856}.steps button:disabled{opacity:.45;cursor:not-allowed}.ability-generation-method .button{height:auto;white-space:normal;text-align:left;padding:16px}.ability-generation-method .button strong{display:block;font-size:17px}.ability-generation-method .button small{display:block;font-size:14px;line-height:1.5;font-weight:400;margin-top:8px}.ability-generation-method .button[aria-pressed="true"]{background:#713bce;color:white}.equipment-adjustments{margin:22px 0;border-top:1px solid #ded3e7;padding-top:16px}.equipment-adjustments>summary{font-size:19px;font-weight:700;cursor:pointer;min-height:44px}.shop-section .button{white-space:normal}.summary-identity{margin-right:auto}.summary-strip{display:flex;align-items:center}.source-preset .button-group{flex-wrap:wrap}
@media(max-width:580px){.source-category-actions{align-items:flex-start;font-size:14px}.source-category-actions>.button-group{gap:4px}.source-category-header{gap:8px}.source-category-header .category-tabs{flex-basis:calc(100% - 52px)}.source-category-header .category-tabs button{padding:12px 9px}.ability-generation-method .form-grid{grid-template-columns:1fr}.build-dialog{padding:22px 18px}.build-dialog .button-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.build-dialog .button{font-size:14px;padding:10px}.summary-strip{gap:9px}}
:root {
  --review-scroll-thumb: #9670c6;
  --review-scroll-track: #eee7f5;
  --summary-clearance: calc(116px + env(safe-area-inset-bottom, 0px));
  scrollbar-color: var(--review-scroll-thumb) var(--review-scroll-track);
  scroll-padding-bottom: var(--summary-clearance);
}

/* The document owns source-list scrolling, keeping every book reachable. */
.book-grid,
.book-list,
#book-panel {
  height: auto;
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
}

#app:has(.character-summary) .site-footer {
  padding-bottom: var(--summary-clearance);
}

.book-card {
  scroll-margin-block: 16px var(--summary-clearance);
}

/* Keep native select behavior, with a consistent, readable arrow. */
select:not([multiple]):not([size]),
select[size="1"] {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23713bce' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 22px 22px;
  padding-inline-end: 46px;
  min-height: 44px;
}

select:focus-visible {
  border-color: var(--accent);
  outline: 3px solid #9b6ceb;
  outline-offset: 3px;
}

select:disabled {
  color: #797180;
  background-color: #ece8ef;
  cursor: not-allowed;
  opacity: 1;
}

select option,
select optgroup {
  background-color: #fffefa;
  color: var(--ink);
}

/* Firefox and Chromium/WebKit receive the same restrained purple treatment. */
* {
  scrollbar-color: var(--review-scroll-thumb) var(--review-scroll-track);
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: var(--review-scroll-track);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--review-scroll-thumb);
  border: 3px solid var(--review-scroll-track);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: #7448ad;
}

::-webkit-scrollbar-corner {
  background: var(--review-scroll-track);
}

.character-summary {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.summary-strip {
  gap: 14px;
}

.summary-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-shrink: 0;
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid #78608e;
  border-radius: 5px;
  background: transparent;
  color: #f0e5ff;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  white-space: nowrap;
}

.summary-new:hover,
.summary-toggle:hover {
  background: #513968;
  border-color: #b798d6;
}

.summary-new svg {
  width: 18px;
  height: 18px;
}

.summary-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid #78608e;
  background: #3c2c50;
  line-height: 1.4;
}

.summary-toggle > span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
}

/* The SVG path points down; the collapsed button points toward its panel. */
.summary-toggle .summary-chevron {
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  transform: rotate(180deg);
  transform-origin: center;
  transition: transform 160ms ease;
}

.summary-toggle[aria-expanded="true"] .summary-chevron {
  transform: rotate(0deg);
}

.summary-secondary-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.summary-secondary-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  min-width: 0;
}

.summary-secondary-stats span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .035em;
}

.summary-secondary-stats strong {
  color: var(--ink);
  font-size: 19px;
  font-weight: 750;
  line-height: 1.3;
  white-space: nowrap;
}

.summary-secondary-stats strong small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

@media (max-width: 580px) {
  .summary-strip {
    gap: 8px;
    padding-inline: 12px;
  }

  .summary-identity {
    min-width: 0;
  }

  .summary-new,
  .summary-toggle {
    padding-inline: 9px;
    gap: 5px;
  }

  .summary-secondary-stats {
    gap: 8px;
  }
}

@media (max-width: 359px) {
  .summary-new,
  .summary-toggle {
    padding-inline: 7px;
  }

  .summary-new svg {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .summary-toggle .summary-chevron {
    transition: none;
  }
}

@media (forced-colors: active) {
  select:not([multiple]):not([size]),
  select[size="1"] {
    appearance: auto;
    -webkit-appearance: auto;
    background-image: none;
    padding-inline-end: 11px;
  }

  * {
    scrollbar-color: auto;
  }

  .summary-new,
  .summary-toggle {
    border-color: ButtonText;
  }
}

.builder-controls{border:0;padding:0;margin:0;min-width:0}.rules-progress{padding:12px;background:#eee7ff;color:#5931a1;border-radius:8px;font-weight:700}.builder-controls:disabled{opacity:.72}
.rules-progress progress{display:block;width:100%;height:9px;margin-top:9px;accent-color:#7038d6}.rules-progress small{display:block;font-weight:400;margin-top:5px}.rules-progress{margin-bottom:20px}
