/* Shared Workbench controls. The UI component specification owns the contract; business CSS owns layout only. */
.wb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Entity overview: identity and existing basic facts share one quiet surface.
   Detail layout owns columns; this component never moves descriptions or stats. */
.wb-entity-hero {
  min-width: 0;
  padding: var(--wb-entity-hero-padding, 1.5rem);
  border: 1px solid var(--entity-rule-strong, var(--border));
  border-radius: var(--radius-lg);
  background: var(--elevated);
}
.wb-entity-hero > .entity-facts--meta,
.wb-entity-hero > .catalog-hero__facts {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--entity-rule, var(--border));
}
.wb-entity-hero .catalog-hero__facts > .entity-facts { margin-top: 0; }

/* Recovery is an action, not a filter or a permanent loading placeholder. */
.wb-entity-message { display:grid; justify-items:center; align-content:center; gap:var(--space-4); min-height:16rem; padding:var(--space-6); border:1px solid var(--border); border-radius:var(--radius-lg); color:var(--text-secondary); text-align:center; }
.wb-entity-message h1 { margin:0; color:var(--text); font-size:var(--type-section-title-size); line-height:var(--type-section-title-line); }
.wb-entity-message p { margin:0; }
.wb-entity-message__actions { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--space-3); }
/* Full-page definition pairs: label at the start, value at the end of its
   own column. Page composition retains field order and column count. */
.entity-fact dt, .entity-fact dd { min-width: 0; margin: 0; font-size: var(--entity-body-size, 1rem); line-height: var(--entity-fact-line, 1.5rem); font-weight: 400; overflow-wrap: anywhere; }
.entity-fact dt { color: var(--text-secondary); text-align: start; }
.entity-fact dd { color: var(--text); font-variant-numeric: tabular-nums; text-align: end; }
.entity-fact dd a { color: var(--link); font-size: inherit; font-weight: inherit; text-decoration: none; }
.entity-fact dd a:hover { color: var(--link-hover); }
.lu4-design a.lu4-desc-ref { color:var(--link); text-decoration:none; }
.lu4-design a.lu4-desc-ref:hover { color:var(--link-hover); text-decoration:underline; }
/* Text, not a second dot legend: the element name remains readable without color. */
.wb-attribute-values { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: .125rem .375rem; }
.wb-attribute-values--compact { column-gap: .375rem; }
.wb-attribute-values > [data-attribute] { display: inline; color: var(--attribute-color); font: inherit; white-space: nowrap; }
.wb-attribute-values [data-attribute="fire"] { --attribute-color: var(--lu4-sem-attr-fire); }
.wb-attribute-values [data-attribute="water"] { --attribute-color: var(--lu4-sem-attr-water); }
.wb-attribute-values [data-attribute="wind"] { --attribute-color: var(--lu4-sem-attr-wind); }
.wb-attribute-values [data-attribute="earth"] { --attribute-color: var(--lu4-sem-attr-earth); }
.wb-attribute-values [data-attribute="holy"] { --attribute-color: var(--lu4-sem-attr-holy); }
.wb-attribute-values [data-attribute="unholy"] { --attribute-color: var(--lu4-sem-attr-unholy); }
/* Read-only inline item grades share one treatment across entity lists and
   rewards. Page CSS owns surrounding spacing; identity grade panels are separate. */
.lu4-inline-grade[data-grade] {
  display: inline-flex;
  box-sizing: border-box;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1rem;
  min-height: 1rem;
  padding: 1px .25rem 0;
  border: 0;
  border-radius: 2px;
  background: var(--inline-grade-color, var(--lu4-sem-grade-ng));
  color: var(--lu4-sem-badge-fg);
  font-family: var(--font-ui);
  font-size: var(--type-badge-size);
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  vertical-align: middle;
}
.lu4-inline-grade[data-grade="NG" i] { --inline-grade-color: var(--lu4-sem-grade-ng); }
.lu4-inline-grade[data-grade="D" i] { --inline-grade-color: var(--lu4-sem-grade-d); }
.lu4-inline-grade[data-grade="C" i] { --inline-grade-color: var(--lu4-sem-grade-c); }
.lu4-inline-grade[data-grade="B" i] { --inline-grade-color: var(--lu4-sem-grade-b); }
.lu4-inline-grade[data-grade="A" i] { --inline-grade-color: var(--lu4-sem-grade-a); }
.lu4-inline-grade[data-grade="S" i] { --inline-grade-color: var(--lu4-sem-grade-s); }
.search-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--lu4-control-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-md);
  background: var(--control-bg);
}
.search-field:focus-within { border-color: var(--focus); }
.search-field svg { width: 1rem; height: 1rem; flex: 0 0 1rem; fill: none; stroke: var(--text-secondary); stroke-width: 1.8; }
.search-field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: var(--type-ui-size); line-height: var(--type-ui-line); }
.search-field input:focus,
.search-field input:focus-visible { outline: 0; }
.search-field input::placeholder { color: var(--control-muted); }

.wb-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--lu4-control-height); padding: 0 var(--space-3); border: 1px solid var(--control-border); border-radius: var(--radius-md); background: var(--control-bg); color: var(--control-text); font-size: var(--type-ui-size); line-height: var(--type-ui-line); font-weight: 500; text-decoration: none; }
.wb-button:hover { border-color: var(--control-border-hover); background: var(--control-hover-bg); color: var(--text); }
.wb-button--primary { border-color: var(--lu4-action-primary-bg); background: var(--lu4-action-primary-bg); color: var(--lu4-action-primary-text); }
.wb-button--primary:hover { background: var(--lu4-action-primary-bg); color: var(--lu4-action-primary-text); filter: brightness(1.06); }
.wb-button:disabled { opacity: var(--lu4-disabled-opacity); cursor: not-allowed; }
.wb-button--icon { width: var(--lu4-control-height); padding: 0; }
.wb-button--icon svg:not(.wb-map-icon) { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.wb-button--overlay { --control-border:var(--glass-border); --control-text:var(--text); --control-bg:var(--elevated); --control-hover-bg:var(--elevated); }
.gear-sort-button { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem 0; min-height: 2.25rem; max-width: 100%; border: 0; background: transparent; color: var(--text-muted); font: inherit; text-align: left; cursor: pointer; }
.gear-sort-button[data-direction="asc"], .gear-sort-button[data-direction="desc"] { color: var(--lu4-accent); }
.gear-sort-button:hover { color: var(--text); }
.gear-sort-button:focus-visible { outline: 2px solid var(--lu4-focus-ring); outline-offset: 3px; }
.gear-sort-arrows { flex: 0 0 .75rem; width: .75rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gear-sort-arrows path { opacity: .45; }
.gear-sort-button[data-direction="asc"] .gear-sort-up, .gear-sort-button[data-direction="desc"] .gear-sort-down { opacity: 1; stroke: var(--lu4-accent); stroke-width: 2; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wb-button--overlay { --control-bg:var(--glass-background); -webkit-backdrop-filter:var(--lu4-overlay-backdrop); backdrop-filter:var(--lu4-overlay-backdrop); }
}
/* Map actions stay transparent over photographs. Outline pins and the
   map-search illustration preserve contrast without a permanent tile. */
.wb-button--map-overlay,
.wb-button--map-overlay:hover { border: 0; background: transparent; color: var(--wb-map-overlay-color, var(--lu4-sem-badge-fg)); }
.wb-button--map-overlay > .wb-map-icon { filter: var(--wb-map-overlay-shadow, drop-shadow(0 0 1px rgb(0 0 0 / 95%)) drop-shadow(0 1px 2px rgb(0 0 0 / 75%))); }
.wb-button--map-overlay > .wb-map-action-icon { filter: var(--wb-map-overlay-shadow, drop-shadow(0 1px 2px rgb(0 0 0 / 45%))); }
.wb-button--map-overlay:hover { background: var(--lu4-overlay-soft); box-shadow: inset 0 0 0 1px var(--glass-border); }
.wb-button--map-overlay:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; background: var(--lu4-overlay-soft); }

.wb-input {
  box-sizing: border-box;
  width: var(--wb-input-width, auto);
  height: var(--wb-input-height, auto);
  min-height: var(--lu4-control-height);
  padding: 0 var(--wb-input-padding-inline, var(--space-2));
  border: 1px solid var(--control-border);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  color: var(--control-text);
  font-family: var(--font-ui);
  font-size: var(--type-ui-size);
  line-height: var(--type-ui-line);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: var(--wb-input-align, start);
}
.wb-input:disabled { opacity: var(--lu4-disabled-opacity); cursor: not-allowed; }
.wb-input[aria-invalid="true"] { border-color: var(--lu4-feedback-error); }
.wb-input--numeric { --wb-input-align: center; }
.wb-input.wb-input--small { min-width: 0; min-height: var(--lu4-control-small); height: var(--lu4-control-small); font-size: var(--type-dense-size); line-height: var(--type-dense-line); border-radius: var(--radius-sm); }
.wb-input-shell { display: flex; min-height: var(--lu4-control-height); align-items: center; overflow: hidden; border: 1px solid var(--control-border); border-radius: var(--radius-md); background: var(--control-bg); }
.wb-input-shell:focus-within { border-color: var(--focus); }
.wb-input-shell > .wb-input { min-height: 0; border: 0; border-radius: 0; outline: 0; background: transparent; }
.wb-input-shell > .wb-input:focus,
.wb-input-shell > .wb-input:focus-visible { outline: 0; }

.wb-field { display: grid; min-width: 0; gap: .375rem; }
.wb-field__label { color: var(--text-muted); font-size: var(--type-label-size); line-height: var(--type-label-line); font-weight: 600; }

.wb-select { position: relative; min-width: 0; }
.wb-select__trigger {
  display: flex;
  width: 100%;
  min-height: var(--lu4-control-height);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-3);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  color: var(--control-text);
  font-size: var(--type-ui-size);
  line-height: var(--type-ui-line);
  font-weight: 500;
  text-align: left;
}
.wb-select__trigger:hover { border-color: var(--control-border-hover); background: var(--control-hover-bg); color: var(--text); }
.wb-select__trigger:disabled { opacity: var(--lu4-disabled-opacity); cursor: not-allowed; }
.wb-select__trigger[aria-expanded="true"] { border-color: var(--control-border-hover); background: var(--control-hover-bg); color: var(--text); }
.wb-select__trigger svg { width: 1rem; height: 1rem; flex: 0 0 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.wb-select__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.wb-select__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-select__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--space-1));
  right: 0;
  left: 0;
  display: grid;
  max-height: min(17rem, 42svh);
  gap: 2px;
  margin: 0;
  padding: var(--space-1);
  overflow: auto;
  overscroll-behavior: contain;
  list-style: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--floating);
  color: var(--text-secondary);
  box-shadow: var(--floating-shadow), inset 0 1px 0 var(--inset-highlight);
}
.wb-select__menu[hidden] { display: none; }
.wb-select__option { display: flex; min-height: 2.25rem; align-items: center; padding: .4375rem var(--space-3); border-radius: var(--radius-sm); font-size: var(--type-ui-size); line-height: var(--type-ui-line); cursor: pointer; }
.wb-select__option:hover,
.wb-select__option.is-active { background: var(--surface-interactive); color: var(--text); }
.wb-select__option[aria-selected="true"] { background: var(--selection-bg); color: var(--text); font-weight: 600; box-shadow: none; }

/* A named catalog condition owns one row; its page chooses order and width. */
.wb-catalog-filter { display: grid; grid-template-columns: var(--wb-catalog-label-width, 4.5rem) minmax(0, 1fr); align-items: center; gap: var(--wb-catalog-column-gap, .5rem); min-width: 0; }
.wb-catalog-filter__label { min-width: 0; color: var(--text-secondary); font-size: var(--type-ui-size); line-height: 1.4; font-weight: 400; overflow-wrap: anywhere; }
.wb-catalog-filter__control { min-width: 0; }

/* The search and list are siblings. This top-layer chooser is non-modal: no
   backdrop, focus trap, or page scroll lock belongs to a catalog filter. */
.wb-search-select { display: block; width: 100%; }
.wb-search-select > select[hidden] { display: none; }
.wb-search-select__panel {
  position: fixed;
  inset: auto;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  margin: 0;
  padding: var(--space-2);
  overflow: hidden;
}
.wb-search-select__panel[hidden], .wb-search-select__option[hidden], .wb-search-select__empty[hidden] { display: none; }
.wb-search-select__panel::backdrop { background: transparent; pointer-events: none; }
.wb-search-select__search { flex: 0 0 auto; min-width: 0; padding-bottom: var(--space-2); }
.wb-search-select__search > .wb-input { width: 100%; min-width: 0; box-sizing: border-box; }
.wb-search-select__list { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; overflow: auto; overscroll-behavior: contain; list-style: none; scrollbar-gutter: stable; }
.wb-search-select__option { min-height: 2.25rem; margin: 0; white-space: normal; overflow-wrap: anywhere; }
.wb-search-select__option + .wb-search-select__option { margin-top: 2px; }
.wb-search-select__option[aria-disabled="true"] { opacity: var(--lu4-disabled-opacity); cursor: not-allowed; }
.wb-search-select__empty { flex: 0 0 auto; margin: 0; padding: var(--space-3) var(--space-2); color: var(--text-muted); font-size: var(--type-ui-size); line-height: var(--type-ui-line); text-align: center; }

.wb-mode-switch { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: hidden; border-radius: var(--radius-md); background: transparent; }
.wb-mode-switch > button { position: relative; min-height: var(--lu4-control-height); padding: 0 var(--space-3); border: 1px solid var(--control-border); border-radius: 0; background: transparent; color: var(--control-text); font-size: var(--type-ui-size); line-height: var(--type-ui-line); font-weight: 600; }
.wb-mode-switch > button:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.wb-mode-switch > button:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.wb-mode-switch > button + button { margin-inline-start: -1px; }
.wb-mode-switch > button:hover { background: var(--control-bg); color: var(--text); }
.wb-mode-switch > button:disabled { opacity: var(--lu4-disabled-opacity); cursor: not-allowed; }
.wb-mode-switch > button[aria-pressed="true"] { z-index: 1; border-color: var(--selection-border); background: var(--selection-bg); color: var(--text); }

/* Default tabs switch local sections; the page variant is primary navigation.
   Catalog classification/filter controls and reading-mode switches stay separate. */
.wb-section-tabs { display: flex; width: 100%; min-width: 0; align-items: end; gap: var(--space-1); overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; padding-bottom: 1px; border-bottom: 0; box-shadow: inset 0 -1px var(--border); scrollbar-width: none; }
.wb-section-tabs::-webkit-scrollbar { display: none; }
.wb-section-tabs > button { position: relative; flex: 0 0 auto; min-width: var(--wb-section-tab-min-width,6.5rem); min-height: var(--lu4-control-height); padding: 0 var(--space-3); border: 0; background: transparent; color: var(--text-secondary); font-size: var(--type-ui-size); line-height: var(--type-ui-line); font-weight: 600; white-space: nowrap; }
.wb-section-tabs > button:hover { color: var(--text); }
.wb-section-tabs > button[aria-selected="true"] { color: var(--text); }
/* Paint the baseline inside the scroll clip, then cover it with the selected
   2px marker. A real outer border would remain visible below the clipped marker. */
.wb-section-tabs > button[aria-selected="true"]::after { position: absolute; right: var(--space-3); bottom: -1px; left: var(--space-3); height: 2px; border-radius: 0; background: var(--lu4-accent); content: ""; }
/* Primary content destinations share a full-width navigation band. Only the
   open tab has a three-sided edge; it opens into the content, not a button. */
.wb-section-tabs--page { box-sizing:border-box; width:100%; max-width:100%; align-items:end; gap:var(--space-1); padding:var(--space-2) var(--space-3) 0; border-radius:var(--radius-md) var(--radius-md) 0 0; background:var(--elevated); }
.wb-section-tabs--page > button { min-width:var(--wb-page-tab-min-width,auto); padding-inline:var(--space-4); border:1px solid transparent; border-bottom:0; border-radius:var(--radius-sm) var(--radius-sm) 0 0; color:var(--text-secondary); background:transparent; font-size:var(--type-body-size); line-height:var(--type-body-line); font-weight:500; }
.wb-section-tabs--page > button:hover { color:var(--text); }
.wb-section-tabs--page > button[aria-selected="true"] { border-color:var(--border); background:var(--bg); color:var(--text); font-weight:650; }
.wb-section-tabs--page > button[aria-selected="true"]::before { position:absolute; inset:-1px var(--space-3) auto; height:2px; background:var(--lu4-accent); content:""; }
.wb-section-tabs--page > button[aria-selected="true"]::after { right:0; bottom:0; left:0; height:1px; background:var(--bg); }

/* Plain document identity, light tool context and provenance. Entity heroes
   keep their existing name, illustration, bilingual and action contracts. */
.wb-document-heading,.wb-context-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:var(--space-2) var(--space-5); min-width:0; }
.wb-document-heading { margin-block:0 var(--space-6); }
.wb-document-title { min-width:0; margin:0; color:var(--text); font-size:var(--type-article-title-size); line-height:var(--type-article-title-line); font-weight:700; overflow-wrap:anywhere; }
.wb-context-heading { margin-block:0 var(--space-4); }
.wb-context-title { min-width:0; margin:0; color:var(--text); font-size:var(--type-component-title-size); line-height:var(--type-component-title-line); font-weight:650; overflow-wrap:anywhere; }
.wb-source-link { color:var(--text-muted); font-size:var(--type-ui-size); line-height:var(--type-ui-line); text-decoration:none; white-space:nowrap; }
.wb-source-link:hover { color:var(--link-hover); text-decoration:underline; text-underline-offset:.2em; }
.wb-source-link:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }

/* Destination marks are drawn once, not font-dependent arrow characters.
   Forward is for site destinations; the boxed arrow is for external sources. */
.wb-link-icon { display:inline-block; flex:none; width:1em; height:1em; margin-inline-start:.35em; vertical-align:-.125em; background:currentColor; --wb-link-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10m-4-4 4 4-4 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-mask:var(--wb-link-mark) center / contain no-repeat; mask:var(--wb-link-mark) center / contain no-repeat; }
.wb-link-icon--external { --wb-link-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 3h4v4m0-4L7 9M6 3H3v10h10v-3' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.wb-chip { --wb-chip-bg: var(--control-bg); --wb-chip-border: var(--control-border); position: relative; isolation: isolate; min-height: var(--lu4-control-small); min-width: var(--lu4-control-small); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--control-text); font-size: var(--type-dense-size); line-height: var(--type-dense-line); font-weight: 500; }
.wb-chip::before { content: ""; position: absolute; z-index: -1; inset: 0; border: 1px solid var(--wb-chip-border); border-radius: inherit; background: var(--wb-chip-bg); pointer-events: none; }
.wb-chip:hover { --wb-chip-border: var(--control-border-hover); --wb-chip-bg: var(--control-hover-bg); color: var(--text); }
.wb-chip:disabled { opacity: var(--lu4-disabled-opacity); cursor: not-allowed; }
.wb-chip.is-active,
.wb-chip[aria-pressed="true"],
.wb-chip[aria-selected="true"] { --wb-chip-border: var(--selection-border); --wb-chip-bg: var(--selection-bg); color: var(--text); }
.wb-chip--pill { border-radius: var(--lu4-radius-full); font-size: var(--type-ui-size); line-height: var(--type-ui-line); }
.wb-chip--quiet:not([aria-pressed="true"]):not([aria-selected="true"]):not(.is-active):not(:hover) { --wb-chip-bg: transparent; --wb-chip-border: transparent; }
.wb-chip--pill:is([aria-pressed="true"], [aria-selected="true"]) { color: var(--lu4-accent); }
.wb-chip--category { min-height: var(--lu4-control-height); padding: .375rem var(--space-4); font-weight: 650; }
/* Slim controls retain their 32px size on both pointer types. */
.wb-chip--slim { min-height: var(--lu4-control-small); padding-block: 0; }
.wb-chip--soft:is([aria-pressed="true"], [aria-selected="true"]) { --wb-chip-border: transparent; font-weight: 600; }
.wb-mode-switch--inset { padding: .1875rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--elevated); }
.wb-mode-switch--inset > button { min-height: var(--lu4-control-small); padding: .25rem .625rem; border: 1px solid transparent; border-radius: var(--radius-sm); font-weight: 500; white-space: nowrap; }
.wb-mode-switch--inset > button:first-child,
.wb-mode-switch--inset > button:last-child { border-radius: var(--radius-sm); }
.wb-mode-switch--inset > button + button { margin-inline-start: 0; }
.wb-mode-switch--quiet { gap: .125rem; }
.wb-mode-switch--quiet > button { isolation: isolate; min-height: var(--lu4-control-small); padding: 0 var(--space-2); border: 0; background: transparent; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.wb-mode-switch--quiet > button::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: var(--radius-sm); background: var(--wb-mode-bg, transparent); pointer-events: none; }
.wb-mode-switch--quiet > button:hover { --wb-mode-bg: var(--control-hover-bg); background: transparent; }
.wb-mode-switch--quiet > button[aria-pressed="true"] { --wb-mode-bg: var(--selection-bg); background: transparent; color: var(--lu4-accent); }
.wb-mode-switch--quiet > button + button { margin-inline-start: 0; }

/* Sliding is opt-in; existing segmented and quiet controls keep their roles. */
.wb-mode-switch--sliding { --wb-switch-index:0; --wb-switch-count:2; --wb-switch-drag:0px; position:relative; isolation:isolate; gap:0; padding:.1875rem; border:1px solid var(--control-border); background:var(--control-bg); touch-action:pan-y; user-select:none; }
.wb-mode-switch--sliding::before { content:""; position:absolute; z-index:0; inset-block:.1875rem; left:.1875rem; width:calc((100% - .375rem) / var(--wb-switch-count)); border-radius:var(--radius-sm); background:var(--surface-interactive); transform:translateX(calc(var(--wb-switch-index) * 100% + var(--wb-switch-drag))); transition:transform .18s ease; pointer-events:none; }
.wb-mode-switch--sliding > button { position:relative; z-index:1; min-height:var(--lu4-control-small); padding:0 var(--space-3); border:0; background:transparent; color:var(--text-muted); font-weight:600; white-space:nowrap; }
.wb-mode-switch.wb-mode-switch--sliding > button:focus-visible { outline-offset:-2px; }
.wb-mode-switch--sliding > button:first-child,.wb-mode-switch--sliding > button:last-child { border-radius:var(--radius-sm); }
.wb-mode-switch--sliding > button + button { margin-inline-start:0; }
.wb-mode-switch--sliding > button:hover,.wb-mode-switch--sliding > button[aria-pressed="true"] { border:0; background:transparent; }
.wb-mode-switch--sliding > button[aria-pressed="true"] { color:var(--lu4-accent); font-weight:600; }
.wb-mode-switch--sliding.is-dragging::before { transition:none; }
@media(prefers-reduced-motion:reduce) { .wb-mode-switch--sliding::before { transition:none; } }

/* Scroll strips are the default; explicit wrap groups expose all local values. */
:is(.wb-choice-row, .gear-tabs, .gear-filter-row, .gear-set-combinations, .class-view-toggle, .class-level-pickers) { display: flex; width: 100%; max-width: 100%; min-width: 0; flex-wrap: nowrap; align-items: center; gap: var(--space-2); overflow-x: auto; overflow-y: hidden; padding-block: 3px; overscroll-behavior-inline: contain; scroll-padding-inline: var(--space-2); touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
:is(.wb-choice-row, .gear-tabs, .gear-filter-row, .gear-set-combinations, .class-view-toggle, .class-level-pickers) > * { flex: 0 0 auto; white-space: nowrap; }
:is(.wb-choice-row, .gear-tabs, .gear-filter-row, .gear-set-combinations, .class-view-toggle, .class-level-pickers) > :focus-visible { outline-offset: -2px; }
.wb-choice-row--dense { padding-block: 0; }
.wb-choice-row.wb-choice-row--wrap { flex-wrap: wrap; overflow: visible; }

/* A collection navigator adapts to its own width: rail on desktop, strip in
 * narrow page layouts. Buttons retain native keyboard and pressed semantics. */
.wb-catalog-nav { container: catalog-nav / inline-size; }
.wb-catalog-nav__items { display: grid; gap: var(--space-1); }
.wb-catalog-nav__item { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); min-height: var(--lu4-control-height); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); text-align: left; font: inherit; font-size: var(--type-ui-size); cursor: pointer; }
.wb-catalog-nav__item:hover { background: var(--control-hover-bg); color: var(--text); }
.wb-catalog-nav__item[aria-pressed="true"] { box-shadow: inset 2px 0 var(--lu4-accent); color: var(--text); font-weight: 600; }
.wb-catalog-nav__item--text { grid-template-columns: minmax(0, 1fr); }
.wb-catalog-nav__item--text[aria-pressed="true"] { background: var(--selection-bg); }
.wb-catalog-nav__icon { display: block; width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.wb-catalog-nav__count { font-size: var(--type-micro-size); font-weight: 400; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wb-catalog-nav__item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@container catalog-nav (min-width: 16rem) {
  .wb-catalog-nav__items { display: flex; overflow-x: auto; gap: var(--space-1); padding-block: var(--space-1); scroll-padding-inline: var(--space-2); }
  .wb-catalog-nav__item { flex: 0 0 auto; grid-template-columns: auto auto; padding-inline: var(--space-3); border-radius: 0; white-space: nowrap; }
  .wb-catalog-nav__item--text { grid-template-columns: minmax(0, 1fr); }
  .wb-catalog-nav__icon { display: none; }
  .wb-catalog-nav__item[aria-pressed="true"] { box-shadow: inset 0 -2px var(--lu4-accent); }
}
.wb-catalog-nav--soft .wb-catalog-nav__item[aria-pressed="true"] { box-shadow: none; background: var(--selection-bg); }
.wb-catalog-nav__item--branch { grid-template-columns: minmax(0, 1fr) auto; color: var(--text-muted); }
.wb-catalog-nav__item--branch svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.wb-catalog-nav__item--branch[aria-expanded="true"] svg { transform: rotate(180deg); }

.wb-identity-badge { display: grid; min-width: 3rem; min-height: 3rem; place-content: center; gap: 1px; padding: .25rem .5rem; border: 1px solid var(--selection-border); border-radius: var(--radius-md); background: var(--selection-bg); color: var(--text); text-align: center; }
.wb-identity-badge small { color: var(--text-muted); font-size: var(--type-badge-size); line-height: 1; font-weight: 700; letter-spacing: .04em; }
.wb-identity-badge strong { color: var(--text); font-size: 1rem; line-height: 1.1; font-weight: 750; font-variant-numeric: tabular-nums; }
.wb-identity-badge[hidden] { display: none; }
.wb-icon-button { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; padding: 0; border: 1px solid var(--control-border); border-radius: var(--radius-md); background: transparent; color: var(--control-text); font-size: 1.125rem; line-height: 1; }
.wb-icon-button:hover { border-color: var(--control-border-hover); background: var(--control-hover-bg); color: var(--text); }
.wb-icon-button:disabled { opacity: var(--lu4-disabled-opacity); cursor: not-allowed; }
.wb-icon-button svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wb-icon-button--quiet { width: var(--lu4-touch-target); height: var(--lu4-touch-target); border: 0; border-radius: var(--radius-sm); }

.wb-data-row { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
.wb-data-row:last-child { border-bottom: 0; }
.wb-data-row:hover { background: var(--data-row-hover-bg); }
.wb-data-row[aria-selected="true"] { background: var(--data-row-selected-bg); box-shadow: inset 2px 0 0 var(--selection-border); }
.wb-data-row[aria-selected="true"]:hover { background: var(--data-row-hover-bg); }
/* 地图结果需要在浮层两侧都保留定位感；这是共享 Data Row 的明确变体。 */
.wb-data-row--map-result:is([aria-selected="true"], [aria-pressed="true"]) { background: var(--selection-bg); box-shadow: none; }

/* Hand-painted category/fallback PNGs keep their native color and alpha in both
 * palettes. Never crop them or apply the old monochrome SVG mask treatment. */
img[src*="default-"][src$=".png"] {
  object-fit: contain;
  background: transparent;
  border-radius: 0;
}
/* Only the original monochrome class emblems need contrast on paper.
 * Hand-painted category/fallback PNGs keep their native colors. */
html[data-lu4-palette="paper"] img[src*="/class_icon/class_icon_"] { filter:brightness(.32); background:transparent; }

/* Map-search links use the illustration; in-page location actions use a pin. */
.wb-map-action-icon { display: block; flex: none; width: var(--wb-map-action-icon-size, 2rem); height: var(--wb-map-action-icon-size, 2rem); object-fit: contain; background: transparent; border-radius: 0; }
.wb-map-icon { display: block; flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wb-map-inline-icon { width: 1rem; height: 1rem; }

/* Reusable entity identity. Containers set icon/gap/type variables; the name stack stays identical. */
.wb-entity-link { display: grid; grid-template-columns: var(--wb-entity-icon-size, 2.5rem) minmax(0, 1fr); min-width: 0; align-items: center; gap: var(--wb-entity-gap, .75rem); color: var(--text); text-decoration: none; }
.wb-entity-link:hover .wb-entity-link__primary { color: var(--link-hover); }
/* Rarity belongs to the name only; grade, icons and surrounding surfaces are unchanged. */
.lu4-design .entity-name--rare,
.lu4-design a:hover .entity-name--rare { color: var(--lu4-sem-rare, #e8b84a); }
.wb-entity-link__icon { width: var(--wb-entity-icon-size, 2.5rem); height: var(--wb-entity-icon-size, 2.5rem); border-radius: var(--radius-sm); background: var(--lu4-image-placeholder); object-fit: cover; }
/* Registered page art owns its transparent silhouette, unlike game icon tiles.
   Match the dedicated asset namespace so search, heroes and entry links agree. */
:is(.wb-entity-link__icon, .wb-entity-hero__icon)[src^="guide-"],
.wb-entity-link__icon[src="reference-search-bronze.png"],
.wb-entity-link__icon[src="location-search-bronze.png"] { border-radius:0; background:transparent; object-fit:contain; }
.wb-entity-link__copy { min-width: 0; }
.wb-entity-link__primary,
.wb-entity-link__secondary,
.wb-entity-link__context { display: block; overflow-wrap: anywhere; }
.wb-entity-link__primary { font-size: var(--wb-entity-primary-size, inherit); line-height: var(--wb-entity-primary-line, inherit); }
.wb-entity-link__primary > .lu4-inline-grade { margin-inline-start: .375rem; }
.wb-entity-link__secondary,
.wb-entity-link__context { margin-top: var(--wb-entity-secondary-gap, .15rem); color: var(--wb-entity-secondary-color, var(--text-muted)); font-size: var(--wb-entity-secondary-size, .75rem); line-height: var(--wb-entity-secondary-line, inherit); font-weight: 400; }
.wb-entity-link__qualifier { display: inline-block; margin-left: .5rem; color: var(--text-muted); font-size: var(--wb-entity-qualifier-size, var(--lu4-type-ui-size)); line-height: var(--lu4-type-ui-line); font-weight: 400; white-space: nowrap; vertical-align: baseline; }
.wb-entity-link--reading { --wb-entity-primary-size: var(--lu4-type-body-size); --wb-entity-primary-line: 1.5rem; --wb-entity-secondary-size: var(--lu4-type-ui-size); --wb-entity-secondary-line: 1.375rem; }
.wb-entity-link--inline { display:inline-grid; --wb-entity-icon-size:var(--wb-inline-entity-icon-size, 2rem); --wb-entity-gap:var(--wb-inline-entity-gap, .375rem); --wb-entity-secondary-size:var(--wb-inline-entity-secondary-size, var(--lu4-type-ui-size)); --wb-entity-secondary-line:1.375; max-width:100%; vertical-align:middle; margin:.125rem .125rem; text-align:start; font-weight:400; }
.wb-entity-link--inline .wb-entity-link__primary { font-weight:inherit; }
/* Prose and auxiliary items share one compact, single-language reading role.
   Inline flow lets long names wrap with the sentence rather than as a card. */
.wb-entity-link--reference { display:inline; --wb-entity-icon-size:var(--wb-reference-icon-size,1.125rem); --wb-entity-gap:var(--wb-reference-gap,.375rem); vertical-align:baseline; margin:0; font-size:inherit; line-height:inherit; font-weight:400; }
/* Align the image's visible box to the font's cap center, not the x-height
   center used by `middle`. Keep the name on the surrounding text baseline.
   The em fallback also covers browsers without cap units. */
.wb-entity-link--reference .wb-entity-link__icon { display:inline-block; margin-inline-end:var(--wb-entity-gap); vertical-align:calc(.375em - var(--wb-entity-icon-size) / 2); vertical-align:calc(.5cap - var(--wb-entity-icon-size) / 2); }
.wb-entity-link--reference .wb-entity-link__copy,
.wb-entity-link--reference .wb-entity-link__primary { display:inline; font-size:inherit; line-height:inherit; font-weight:inherit; }
.wb-entity-link--reference .wb-entity-link__context { display:inline; margin:0 0 0 .375rem; font-size:inherit; line-height:inherit; }
.wb-entity-link--text { grid-template-columns:minmax(0,1fr); }
.wb-entity-link--compact { --wb-entity-icon-size: 2rem; --wb-entity-gap: .5rem; --wb-entity-primary-size: var(--lu4-type-ui-size); --wb-entity-primary-line: var(--lu4-type-ui-line); --wb-entity-secondary-size: var(--lu4-type-label-size); --wb-entity-secondary-line: var(--lu4-type-label-line); --wb-entity-qualifier-size: var(--lu4-type-label-size); }

/* Optional metadata column; changes depend on available list width, not viewport. */
.wb-entity-list { container: entity-list / inline-size; }
.wb-entity-link--with-trailing { grid-template-columns: var(--wb-entity-icon-size, 2.5rem) minmax(0, 1fr) minmax(0, var(--wb-entity-trailing-width, 12rem)); row-gap: var(--space-1); }
.wb-entity-link__trailing { min-width: 0; color: var(--text-muted); font-size: var(--wb-entity-trailing-size, var(--type-label-size)); line-height: var(--type-label-line); text-align: right; overflow-wrap: anywhere; }
@container entity-list (max-width: 36rem) {
  .wb-entity-link--with-trailing { grid-template-columns: var(--wb-entity-icon-size, 2.5rem) minmax(0, 1fr); }
  .wb-entity-link--with-trailing > .wb-entity-link__icon { grid-row: 1 / span 2; }
  .wb-entity-link__trailing { grid-column: 2; text-align: left; font-size: var(--wb-entity-trailing-size, var(--type-micro-size)); }
}

/* Marker tooltip and same-point choices share one row contract; only their outer surface differs. */
.wb-entity-row { display: grid; min-height: var(--wb-entity-row-height, 2.875rem); grid-template-columns: var(--wb-entity-row-icon-size, 2rem) minmax(0, 1fr) auto; align-items: center; gap: var(--wb-entity-row-gap, .5rem); padding: var(--wb-entity-row-padding, .375rem .5rem); line-height: 1.4; }
.wb-entity-row__icon { width: var(--wb-entity-row-icon-size, 2rem); height: var(--wb-entity-row-icon-size, 2rem); border-radius: var(--radius-sm); background: var(--lu4-image-placeholder); object-fit: cover; }
.wb-entity-row__copy { display: grid; min-width: 0; gap: 1px; }
.wb-entity-row__primary,
.wb-entity-row__secondary { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-entity-row__primary { color: var(--text); font-size: var(--type-label-size); line-height: 1.25; font-weight: 650; }
.wb-entity-row__secondary { color: var(--text-muted); font-size: var(--type-micro-size); line-height: 1.25; font-weight: 500; }
.wb-entity-row__trailing { align-self: center; color: var(--text-secondary); font-size: var(--type-badge-size); line-height: 1; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Card headers share a real trailing column, independent of detail height. */
.wb-card-head { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--space-2); min-width: 0; }
.wb-card-head > :first-child { min-width: 0; }
/* Related items share identity, effect and an optional trailing action.
   Effects are content, never an alternative-name typography variant. */
.wb-related-item { display: grid; align-content: start; gap: .375rem; min-width: 0; }
.wb-related-item__head { min-width: 0; }
.wb-related-item__head > .wb-entity-link { grid-column: 1; }
.wb-related-item--with-value { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); }
.wb-related-item--with-value > .wb-related-item__head { grid-column: 1; }
.wb-related-item__value { grid-column: 2; grid-row: 1; align-self: center; margin-right: 1.25rem; color: var(--text); font-size: var(--entity-body-size, 1rem); line-height: var(--lu4-type-body-line); font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb-related-item--with-value > .wb-related-item__effect { grid-column: 1 / -1; }
.wb-related-item__effect { margin: 0 0 0 calc(var(--wb-entity-icon-size, 2.5rem) + var(--wb-entity-gap, .75rem)); color: var(--text-secondary); font-size: var(--entity-body-size, 1rem); line-height: var(--entity-body-line, 1.75rem); font-weight: 400; overflow-wrap: anywhere; }
summary.wb-card-head { padding: 0; cursor: pointer; list-style: none; }
summary.wb-card-head::-webkit-details-marker { display: none; }
.wb-card-toggle { display: grid; flex: 0 0 auto; align-self: center; place-items: center; box-sizing: border-box; width: var(--lu4-control-small); height: var(--lu4-control-small); padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; }
.wb-card-toggle:hover { background: var(--selection-bg); color: var(--text); }
/* Attached card supplements share the actual used border offsets, including
 * fractional CSS borders at browser zoom. Page content stays in normal grids. */
.wb-attached-card { position:relative; }
.lu4-design .wb-attached-card[data-floating] { z-index:4; }
.lu4-design .wb-attached-card[data-floating]:not(.wb-attached-card--popover) { border-color:var(--border-strong); border-bottom-left-radius:0; border-bottom-right-radius:0; }
.wb-attached-card[data-floating] > .wb-attached-panel,
.wb-attached-card--nested[data-floating] .wb-attached-panel { position:absolute; top:var(--wb-attached-top,100%); left:var(--wb-attached-left,-1px); right:var(--wb-attached-right,-1px); margin:0; padding:.875rem 1rem 1rem; max-height:min(28rem,var(--wb-attached-limit)); overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--border-strong); border-top-color:var(--entity-rule,var(--border)); border-radius:0 0 var(--radius-lg) var(--radius-lg); background:var(--wb-attached-background,var(--surface)); box-shadow:0 .75rem 1.5rem rgb(0 0 0 / .22); }
.lu4-design .wb-attached-card[data-floating].is-preview-above:not(.wb-attached-card--popover) { border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.wb-attached-card[data-floating].is-preview-above > .wb-attached-panel,
.wb-attached-card--nested[data-floating].is-preview-above .wb-attached-panel { top:auto; bottom:var(--wb-attached-bottom,100%); border-radius:var(--radius-lg) var(--radius-lg) 0 0; border-top-color:var(--border-strong); border-bottom-color:var(--entity-rule,var(--border)); }
/* A standalone preview shares positioning and scrolling, not the card's joined
 * outline. Its complete small-radius frame is independent of opening direction. */
.wb-attached-card.wb-attached-card--popover[data-floating] > .wb-attached-panel,
.wb-attached-card--nested.wb-attached-card--popover[data-floating] .wb-attached-panel { max-width:var(--wb-preview-max-width,18.75rem); border-radius:var(--radius-sm); border-color:var(--border-strong); }
.wb-card-toggle:focus-visible, .lu4-design details > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wb-card-toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.wb-card-toggle[aria-expanded="true"] svg,
details[open] > .wb-card-head > .wb-card-toggle svg { transform: rotate(180deg); }

/* Disclosure owns behavior and chevron state. Consumers own density, borders and content layout. */
.wb-disclosure--inline > summary { position: relative; min-height: 1.5rem; line-height: 1.5rem; }
/* A 24px reading-row disclosure is itself a valid target. Do not extend it
   into adjacent facts merely to reach the optional 44px enhanced target. */
.wb-disclosure > .wb-disclosure__summary { cursor: pointer; list-style: none; }
.wb-disclosure > .wb-disclosure__summary::-webkit-details-marker { display: none; }
.wb-disclosure__icon { fill: none; transition: transform .15s ease; }
.wb-disclosure[open] > .wb-disclosure__summary .wb-disclosure__icon { transform: rotate(180deg); }

/* Reading lists: a disclosure is a peer of its neighboring fact rows. */
.wb-disclosure-list details > summary {
  display: block;
  min-height: 1.5rem;
  padding: var(--wb-disclosure-block-space, .125rem) 2rem var(--wb-disclosure-block-space, .125rem) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.wb-disclosure-list details[open] > summary { margin-bottom: .25rem; }
.wb-disclosure-list details > summary:hover { color: var(--link-hover); }

/* One disclosure glyph, including native summaries and legacy CSS triangles.
   Navigation and sorting arrows are deliberately not disclosure indicators. */
.lu4-design { --wb-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lu4-design details > summary { position: relative; list-style: none; }
.lu4-design details > summary::-webkit-details-marker { display: none; }
.lu4-design details > summary::marker { content: ""; }
.lu4-design details > summary:not(:has(.wb-card-toggle, .wb-disclosure__icon)) { padding-inline-end: 2rem; }
.lu4-design details > summary:not(:has(.wb-card-toggle, .wb-disclosure__icon))::after {
  content: ""; position: absolute; inset-inline-end: .5rem; top: 50%;
  width: 1rem; height: 1rem; border: 0; background: currentColor;
  mask: var(--wb-chevron) center / contain no-repeat;
  color: var(--text-secondary); transform: translateY(-50%); transition: transform .15s ease;
  pointer-events: none;
}
.lu4-design details[open] > summary:not(:has(.wb-card-toggle, .wb-disclosure__icon))::after { transform: translateY(-50%) rotate(180deg); }
.wb-chevron, .wb-card-toggle svg, .wb-disclosure__icon, .item-material__toggle svg {
  width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .lu4-design details > summary::after, .wb-chevron, .wb-card-toggle svg, .wb-disclosure__icon { transition: none; }
}

.wb-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-1); min-height: 3.25rem; padding: var(--space-2) var(--space-3); }
.wb-pagination[hidden] { display: none; }
.wb-pagination button { min-width: 2.25rem; height: 2.25rem; padding: 0 var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-family: var(--font-ui); font-size: var(--type-label-size); line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.wb-pagination button:hover:not(:disabled) { border-color: var(--control-border-hover); background: var(--control-hover-bg); color: var(--text); }
.wb-pagination button[aria-current="page"] { border-color: var(--selection-border); background: var(--selection-bg); color: var(--text); }
.wb-pagination button:disabled { opacity: .35; cursor: default; }
.wb-pagination span { min-width: 1rem; color: var(--text-muted); font-size: var(--type-label-size); line-height: var(--type-label-line); text-align: center; }

.wb-empty-state { display: grid; gap: var(--space-2); color: var(--text-secondary); line-height: 1.55; }
.wb-empty-state strong { color: var(--text); }

/* Control density is a component choice, not a viewport/pointer override.
   44px remains available for independent overlay/close actions, not a floor. */
/* Compact view tools keep the 36px track on every pointer type. */
.wb-mode-switch--sliding, .wb-mode-switch--inset { overflow: visible; }
.wb-mode-switch--sliding > button, .wb-mode-switch--inset > button { min-height: 1.75rem; padding-block: 0; }

@media (max-width: 959px), (pointer: coarse) {
  /* Input text avoids mobile auto-zoom; this does not increase control height. */
  .search-field:not(.search-field--compact) input { font-size: var(--lu4-type-body-size); }
}

/* Dense overlay controls: explicit, shared variants for constrained map/tool panels. */
.search-field--compact { min-height: 2.25rem; padding-inline: .625rem; }
.search-field--compact input { font-size: var(--type-dense-size); line-height: var(--type-dense-line); }
.wb-input--compact { min-height: 1.875rem; font-size: var(--type-label-size); line-height: var(--type-label-line); }
.wb-input-shell.wb-control--compact { min-height: 1.875rem; }
.wb-input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.wb-input[type="number"]::-webkit-inner-spin-button,
.wb-input[type="number"]::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
.wb-field--inline { display: flex; align-items: center; gap: var(--space-2); }
.wb-field--inline > .wb-field__label { flex: 0 0 auto; }
.wb-field--inline > .wb-field__control,
.wb-field--inline > .wb-select { flex: 1 1 auto; min-width: 0; }
.wb-control--compact { min-height: 1.875rem; font-size: var(--type-label-size); line-height: var(--type-label-line); }
.wb-select--compact .wb-select__trigger { min-height: 1.875rem; padding-inline: var(--space-2); font-size: var(--type-label-size); line-height: var(--type-label-line); }
.wb-select--compact .wb-select__option { min-height: 2rem; padding: .3125rem var(--space-2); font-size: var(--type-label-size); line-height: var(--type-label-line); }
.wb-mode-switch--compact > button { min-height: 2rem; padding-inline: var(--space-2); font-size: var(--type-label-size); line-height: var(--type-label-line); }
.wb-chip--compact { min-height: 1.875rem; padding-inline: .5625rem; font-size: var(--type-micro-size); line-height: 1.35; }
.wb-icon-button--compact { position: relative; width: 2.25rem; height: 2.25rem; }
.wb-icon-button--compact::before { position: absolute; inset: -.25rem; content: ""; }
.wb-pagination--compact { min-height: 2.25rem; padding-block: 0; }
.wb-pagination--compact button { min-width: 2rem; height: 2rem; }

.wb-switch { position: relative; width: 2.25rem; height: 1.25rem; flex: 0 0 2.25rem; padding: 0; border: 1px solid var(--control-border-hover); border-radius: 999px; background: var(--control-hover-bg); }
.wb-switch::before { position: absolute; inset: -.375rem; content: ""; }
.wb-switch span { position: absolute; top: .1875rem; left: .1875rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--text-muted); transition: transform .16s ease, background .16s ease; }
.wb-switch[aria-checked="true"] { border-color: var(--selection-border); background: var(--selection-bg); }
.wb-switch[aria-checked="true"] span { background: var(--selection-border); transform: translateX(1rem); }

.wb-range { width: 100%; height: 1.5rem; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.wb-range::-webkit-slider-runnable-track { height: .1875rem; border-radius: 999px; background: var(--border-strong); }
.wb-range::-moz-range-track { height: .1875rem; border-radius: 999px; background: var(--border-strong); }
.wb-range::-webkit-slider-thumb { width: .875rem; height: .875rem; margin-top: -.34375rem; border: 2px solid var(--surface); border-radius: 50%; background: var(--marker, var(--selection-border)); box-shadow: 0 0 0 1px var(--marker, var(--selection-border)); appearance: none; }
.wb-range::-moz-range-thumb { width: .75rem; height: .75rem; border: 2px solid var(--surface); border-radius: 50%; background: var(--marker, var(--selection-border)); box-shadow: 0 0 0 1px var(--marker, var(--selection-border)); }
/* Dual-thumb overlay track: page owns the painted range bar; thumbs stay hit-targets. */
.wb-range--overlay { position: absolute; inset: .25rem 0; height: 1.5rem; pointer-events: none; }
.wb-range--overlay::-webkit-slider-runnable-track { background: transparent; }
.wb-range--overlay::-moz-range-track { background: transparent; }
.wb-range--overlay::-webkit-slider-thumb { pointer-events: auto; }
.wb-range--overlay::-moz-range-thumb { pointer-events: auto; }
/* The map keeps its label in the same grid; it shares the range width cap
   without inheriting the three-column fieldset layout. */
.wb-number-range, .wb-number-range-width { width:min(100%,var(--wb-number-range-max-width,24rem)); }
.wb-number-range { display:grid; grid-template-columns:minmax(0,3.25rem) minmax(1.5rem,1fr) minmax(0,3.25rem); align-items:center; gap:var(--space-2); min-width:0; margin:0; padding:0; border:0; }
.wb-number-range .wb-input { --wb-input-width:100%; --wb-input-align:center; min-width:0; }
.wb-number-range__track { position:relative; min-width:0; height:1.875rem; }
.wb-number-range__track > i { position:absolute; top:50%; right:0; left:0; height:.1875rem; border-radius:999px; background:var(--border-strong); transform:translateY(-50%); }
.wb-number-range__track > i::after { position:absolute; top:0; right:calc(100% - var(--range-max)); bottom:0; left:var(--range-min); border-radius:inherit; background:var(--marker,var(--selection-border)); content:""; }
.wb-number-range__error { grid-column:1/-1; margin:0; color:var(--lu4-feedback-error); font-size:var(--type-label-size); line-height:1.5; }

@media (prefers-reduced-motion: reduce) {
  .wb-select__trigger svg { transition-duration: .01ms; }
}

/* Shared overlay contract: opaque fallback, translucent material only when supported. */
.wb-overlay-surface, .wb-select__menu { border: 1px solid var(--glass-border); border-radius: var(--radius-lg); background: var(--elevated); color: var(--text); box-shadow: var(--floating-shadow), inset 0 1px 0 var(--inset-highlight); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wb-overlay-surface, .wb-select__menu { background: var(--lu4-overlay-background); -webkit-backdrop-filter: var(--lu4-overlay-backdrop); backdrop-filter: var(--lu4-overlay-backdrop); }
}
.wb-overlay-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--lu4-touch-target); }
.wb-overlay-head h2 { margin: 0; font-size: var(--lu4-type-overlay-title-size); line-height: var(--lu4-type-overlay-title-line); font-weight: 600; }
.wb-close { position: relative; isolation: isolate; display: grid; place-items: center; flex: 0 0 var(--lu4-touch-target); width: var(--lu4-touch-target); height: var(--lu4-touch-target); padding: 0; border: 0; background: transparent; color: var(--text-muted); }
.wb-close::before { content: ""; position: absolute; z-index: -1; width: var(--lu4-control-close); height: var(--lu4-control-close); border-radius: var(--radius-sm); pointer-events: none; }
.wb-close:hover::before, .wb-close:focus-visible::before { background: var(--control-hover-bg); }
.wb-close:hover { color: var(--text); }
.wb-close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* Image-first lightbox: no dialog surface, frame, heading or toolbar. */
.wb-media-viewer { position:fixed; inset:0; box-sizing:border-box; width:100%; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; background:transparent; color:var(--lu4-sem-badge-fg,#fff); overflow:hidden; }
.wb-media-viewer::backdrop { background:rgb(0 0 0 / 86%); }
.wb-media-viewer__stage { position:relative; width:100%; height:100%; overflow:hidden; touch-action:none; cursor:zoom-in; }
.wb-media-viewer__stage:focus-visible { outline:2px solid var(--focus); outline-offset:-3px; }
.wb-media-viewer__stage.is-zoomed { cursor:grab; }
.wb-media-viewer__stage.is-zoomed:active { cursor:grabbing; }
.wb-media-viewer__stage > img { position:absolute; display:block; top:50%; left:50%; max-width:none; max-height:none; margin:0; transform-origin:center; user-select:none; -webkit-user-drag:none; }
.wb-media-viewer__control { position:absolute; z-index:1; display:grid; place-items:center; width:2.75rem; height:2.75rem; padding:0; border:0; border-radius:var(--radius-sm); background:transparent; color:inherit; cursor:pointer; filter:drop-shadow(0 1px 2px rgb(0 0 0 / 85%)); }
.wb-media-viewer__control:hover { background:rgb(0 0 0 / 30%); }
.wb-media-viewer__control:focus-visible { outline:2px solid currentColor; outline-offset:-2px; }
.wb-media-viewer__close { top:max(var(--space-3),env(safe-area-inset-top)); right:max(var(--space-3),env(safe-area-inset-right)); font-size:1.75rem; line-height:1; }
.wb-media-viewer__previous,.wb-media-viewer__next { top:50%; transform:translateY(-50%); }
.wb-media-viewer__previous { left:max(var(--space-2),env(safe-area-inset-left)); }
.wb-media-viewer__next { right:max(var(--space-2),env(safe-area-inset-right)); }
.wb-media-viewer__control svg { width:1.75rem; height:1.75rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wb-media-viewer__error { position:absolute; inset:50% var(--space-5) auto; transform:translateY(-50%); text-align:center; }
.wb-media-viewer__error p { margin:0 0 var(--space-3); }
.wb-media-viewer__error .wb-text-button { color:inherit; }
.wb-media-viewer [hidden] { display:none !important; }
.wb-text-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--lu4-control-small); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--link); font-size: var(--type-label-size); line-height: var(--type-label-line); font-weight: 500; cursor: pointer; }
.wb-text-button:hover { color: var(--link-hover); background: var(--control-hover-bg); }
.wb-text-button[hidden] { display: none; }
.wb-text-button--inline { display:inline; min-height:0; padding:0; border-radius:0; font:inherit; vertical-align:baseline; text-align:inherit; }
.wb-text-button--inline:hover { background:transparent; text-decoration:underline; }
.wb-text-button--inline:disabled { opacity:var(--lu4-disabled-opacity); cursor:not-allowed; }
.wb-text-button > svg:not(.wb-map-icon) { flex:none; width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }