/* Build editor (GET /builds/new) chrome. BESPOKE, no BB source: the build-creation
 * controls (Add Brother, and later Delete / Save Build) are this project's own, not a
 * Battle Brothers screen. Reuses the BB gold accent (#dda21f, scaffold.css
 * .font-color-value) + the page dark (#1a1814) so it sits with the character screen;
 * every other value is bespoke, like builds.css / stepper.css / retinue.css. */

/* Add Brother button: SAME design as the right-margin "Add Named" button (the BB
 * button-7 sprite + the add-named-big double-height headline style), but placed in the
 * LEFT margin ABOVE Level Up, in its own absolutely-positioned container so Level Up /
 * Perk Points keep their positions (they live in .left-top-actions at top:6rem).
 * Left margin + width copied from levelup.css (.left-edit-actions left:-11.5rem) and the
 * big styling from resources.css:257-275 (.add-item-actions .add-named-big.button-7),
 * re-scoped to this container. top is bespoke (sits above the top:6rem Level Up row). */
.character-screen-container .builds-add-actions {
  position: absolute;
  left:     -11.5rem;                  /* BB port: levelup.css .left-edit-actions left */
  top:      0.4rem;                    /* bespoke: above .left-top-actions (top:6rem) */
  width:    11.0rem;                   /* resources.css .add-item-actions width */
  z-index:  11;
}
/* Double height + centered bigger label, verbatim from resources.css .add-named-big. */
.character-screen-container .builds-add-actions .add-named-big.button-7,
.character-screen-container .builds-add-actions .add-named-big.button-7:hover,
.character-screen-container .builds-add-actions .add-named-big.button-7.is-selected {
  height:          4.8rem;             /* BB port: resources.css:261 */
  background-size: 11.0rem 4.8rem;     /* BB port: resources.css:264 */
}
.character-screen-container .builds-add-actions .add-named-big.button-7 > .label {
  display:         flex;               /* BB port: resources.css:268-274 */
  align-items:     center;
  justify-content: center;
  margin:          0;
  font-size:       1.6rem;
}

/* Builds view strips the campaign-only chrome (user 2026-07-10). A build is a roster of
 * DESIGNED brothers, not a loaded company, so it has no company name / resources / world
 * seed / daytime and no Retinue (a build never carries one). A build's LEVEL - and thus its
 * perk points (= level - 1) - is set at Add-Brother time via the popup (add_brother.js), so
 * both the "Level Up" and "Perk Points" (Additional Perk Points) buttons are hidden. The
 * .is-builds class rides .character-screen in builds mode
 * (inventory.html), exactly like .is-point hides its own affordances off .is-point.
 * Hiding .l-button.is-retinue (not just the anchor) drops the tab from the centred flex
 * row so the remaining Stash / Perks re-centre (right_panel_header.css is-three-tabs). */
.is-builds [data-additional-perk-points],
.is-builds [data-levelup-grant],
/* Roster-strip leveled-up ▲ badge (_brother_formation.html .primary-status-container,
 * shown when perk_points != 0 || levelups != 0). Every build brother carries unspent
 * perk points to allocate, so it would always show, and leveling is not a build concept
 * (a build's level + perk points are fixed at Add-Brother time). Everybody is fully
 * leveled in build mode, so drop the badge (user 2026-07-12). The Perks-tab "Perks (N)"
 * count stays - that is where available points are surfaced. */
.is-builds .primary-status-container,
.is-builds .l-button.is-retinue,
.is-builds .retinue-module,
.is-builds .company-resources,
.is-builds .company-name-edit,
.is-builds .company-seed { display: none !important; }

/* Heal + Injuries buttons: SHOWN but greyed + inert in build mode (user 2026-07-11) -
 * previously hidden by the display:none list above. A build is a design template, so
 * healing and injuries don't apply, but the buttons stay visible (greyed) so the left
 * edit-actions column matches the normal editor. INERTNESS is enforced in JS (NOT
 * pointer-events:none, so the tooltip still shows): heal.js forces .is-disabled under
 * window.BUILDS (its own click guard), and skills.js openModal early-returns for injuries
 * under window.BUILDS. GREYING: the Heal button reuses the existing .heal-button.is-disabled
 * treatment (levelup.css:103-111; _brother_left.html adds is-disabled in builds); the
 * Injuries button has no disabled style of its own, so grey it here with the SAME values.
 * Higher specificity than .bb-editable-action (editable.css:51,70) so it wins. */
.character-screen.is-builds [data-edit-injuries],
.character-screen.is-builds [data-edit-injuries]:hover {
  box-shadow:   none;
  border-color: #555;
  opacity:      0.5;
  cursor:       default;
}
.character-screen.is-builds [data-edit-injuries] .label { color: #9a9a9a !important; }

/* Builds hover-delete × on each roster-strip brother tile (user 2026-07-11): the item-style
 * red round × in the tile's top-right corner, hidden until the tile is hovered - mirrors the
 * per-item delete × (itemactions.css .item-actions/.item-delete). delete_brother.js handles the
 * click and removes that brother. Bespoke affordance (BB has no delete), like the item delete.
 * The tile <a.is-list-brother> is already position:relative (formation.css:202), so the absolute
 * overlay anchors to it. Editor only (the tile × markup is gated {% if builds %}). */
.character-screen-container .brother.is-list-brother > .brother-actions {
  position: absolute;
  top:      0.2rem;
  right:    0.2rem;
  z-index:  30;
  display:  none;
}
.character-screen-container .brother.is-list-brother:hover > .brother-actions { display: flex; gap: 0.3rem; }
/* Shared sizing for both roster-tile actions (copy + delete); colours per action below. */
.character-screen-container .brother-actions .brother-action {
  width:         2.2rem;
  height:        2.2rem;
  line-height:   2.0rem;
  text-align:    center;
  border-radius: 1.1rem;
  font-size:     1.8rem;
  cursor:        pointer;
}
.character-screen-container .brother-actions .brother-delete {
  color:            #f4d9d3;
  background-color: #9c2b1e;   /* same danger red as itemactions.css .item-delete */
}
.character-screen-container .brother-actions .brother-delete:hover { background-color: #c0392b; }
/* Copy brother: bespoke affordance (BB has no copy control - same basis as the delete ×). A
   positive green, distinct from the danger red. Symbol-font fallback so the ⧉ glyph renders even
   when the BB font lacks it; slightly smaller so the two-square glyph sits like the ×. */
.character-screen-container .brother-actions .brother-copy {
  color:            #dfe9d3;
  background-color: #3a6b2e;
  font-family:      "Segoe UI Symbol", "Noto Sans Symbols", sans-serif;
  font-size:        1.5rem;
}
.character-screen-container .brother-actions .brother-copy:hover { background-color: #4a8a3a; }

/* The PUBLISHED build view (.is-builds-view) hides the company Stash tab + panel: the shared
 * build shows each brother and the gear they wear, not the company inventory - the stash is a
 * build-time workbench only (user 2026-07-11). The Retinue tab is already hidden by .is-builds
 * above (a build has no retinue). Bespoke, no BB source. */
.is-builds-view .l-button.is-inventory,
.is-builds-view .inventory-list-module { display: none !important; }

/* --- Builds perk emphasis (user 2026-07-11) -------------------------------------------
 * A build's perk tree ranks its three states by prominence so REQUIRED perks are the focus
 * (a click cycles not-selected -> required -> flex -> not-selected, perk.js):
 *   required (owned) -> pops: an enlarged, glowing gold BB frame + a gold glow on the icon
 *   flex (optional)  -> quieter: a soft single cyan glow, slightly faded
 *   unused           -> recedes: greyed AND extra-transparent (a deliberate, user-approved
 *                       deviation from BB, builds only)
 * Cyan (#4ec2d6) + the glows are this project's own accents (not BB - only the frame sprite
 * is BB). Scoped to .is-builds (builds editor + published view); the normal save editor is
 * untouched. 5+ class selectors so these outrank perks.css. */
/* REQUIRED: highlight the whole 5rem tile, not the round frame (user 2026-07-11). The old
 * approach enlarged the BB frame + hand-nudged it with translate, which pushed the frame (and
 * its glow) off the icon's centre so the glow read "off". A ::before pinned to the tile with a
 * SYMMETRIC inset is centred by construction, so it can never drift, and it reads uniformly
 * regardless of each perk icon's own internal alignment. The BB round frame is hidden here. */
.is-builds .character-screen-container .perks-module .l-perk-container.is-required-perk .selection-image-layer {
  display: none;
}
.is-builds .character-screen-container .perks-module .l-perk-container.is-required-perk::before {
  content:       "";
  position:      absolute;
  top:           0.1rem;
  left:          0.1rem;
  right:         0.1rem;
  bottom:        0.1rem;   /* symmetric inset -> 4.8rem square, slightly larger than the 4.5rem icon, centred on the tile */
  border-radius: 0.6rem;
  background:    rgba(221, 162, 31, 0.18);
  box-shadow:    inset 0 0 0 0.2rem #dda21f, 0 0 0.9rem rgba(221, 162, 31, 0.55);
  z-index:       0;        /* behind the perk icon (perk-image-layer z-index 2) */
  pointer-events: none;
}
/* FLEX: obviously the BLUE one, but NOT more emphasized - a blue TINT on the icon rather than
 * a glow (a glow would pull focus). Slightly faded so it stays secondary to required.
 * (sepia+hue-rotate recolours the icon toward the flex cyan; user 2026-07-11.) */
.is-builds .character-screen-container .perks-module .l-perk-container.is-flex-perk .perk-image-layer {
  opacity: 0.85;
  filter:  brightness(0.95) sepia(0.55) hue-rotate(160deg) saturate(2.2);
}
/* UNUSED (neither required nor flex): greyed AND extra-transparent so it recedes. */
.is-builds .character-screen-container .perks-module .l-perk-container:not(.is-required-perk):not(.is-flex-perk) .perk-image-layer {
  opacity: 0.4;
}

/* Perk-state legend (_brother_perks.html), builds + published view only. Pinned to the
 * BOTTOM-RIGHT corner as an overlay (two stacked explainers, text LEFT-aligned), so it does
 * NOT push the perk tree down - the tree keeps its perks.css top:2.0rem (user 2026-07-11).
 * Each item is two lines: a head (round marker + "Required:"/"Flex:" + live count from
 * perk.js updateLegend) and a description below. Bespoke, no BB source. */
.character-screen-container .perks-module .perk-legend {
  position:       absolute;
  bottom:         4.6rem;        /* 40px up from the corner (user 2026-07-11; 1rem = 10px) */
  right:          0.8rem;
  z-index:        3;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;   /* text left-aligned; the block sits on the right */
  gap:            1.0rem;        /* blank line between the two items */
  color:          #9a9078;
  line-height:    1.8rem;
  text-align:     left;
}
.perk-legend .perk-legend-item { display: flex; flex-direction: column; gap: 0.1rem; }
.perk-legend .perk-legend-head { display: flex; align-items: center; gap: 0.6rem; }
.perk-legend .perk-legend-desc { color: #7f7663; }   /* the sub-line, a touch dimmer */
/* ROUND markers (not bars) before Required / Flex. */
.perk-legend .perk-legend-swatch {
  width: 1.5rem; height: 1.5rem; border-radius: 50%; flex: 0 0 auto;
}
.perk-legend .perk-legend-swatch.is-selected-swatch {
  background:    rgba(221, 162, 31, 0.30);
  box-shadow:    0 0 0 0.2rem #dda21f;   /* gold ring = required */
  border-radius: 0.2rem;                 /* SQUARE marker (matches the perk-tile highlight); flex stays round */
}
.perk-legend .perk-legend-swatch.is-flex-swatch {
  background: rgba(78, 194, 214, 0.25);
  box-shadow: 0 0 0 0.2rem #4ec2d6;   /* cyan ring = flex */
}

/* Build editor header (GET /buildscreate): 3 columns with arrows - name | Save | share link
 * (user 2026-07-11). Reuses the .bng-stepper box + .bng-step-col / .bng-step-arrow / .bng-step-btn
 * (stepper.css). The name (col 1) and the share link (col 3) grow and share the width; Save (col 2)
 * is the narrowest column. The name + share fields and the mid-save dimming are bespoke (no BB
 * source). Selectors are prefixed with .bng-builds-header so they outrank the base .bng-step-col. */
/* Each side column is exactly ONE BOX tall: the box is the only in-flow child, while the caption
 * (absolute, above) and the feedback line (absolute, below) are lifted OUT of flow. So the two boxes
 * - plus Save and the arrows - sit on one fixed, vertically-centred row that never moves, whether
 * the share box shows the "save first" hint or the live link, and whether or not a feedback line is
 * present (user 2026-07-11: "no movement when you click Save"). */
.bng-builds-header { align-items: center; }        /* columns are box-height + centred, NOT stretched to the band */
.bng-builds-header .bng-build-name-col,
.bng-builds-header .bng-build-share-col {
  position:  relative;           /* anchor for the absolute caption + feedback line */
  display:   block;              /* the single box is the only flow content */
  flex:      1 1 0;              /* both grow and split the width evenly */
  min-width: 0;
  max-width: 40rem;
}
.bng-builds-header .bng-build-save-col { flex: 0 0 auto; }   /* Save = NARROWEST column */
/* Captions float ABOVE their box (out of flow), same offset so both labels align. */
.bng-build-caption {
  position:    absolute;
  bottom:      100%;
  left:        0;
  margin:      0 0 0.4rem;
  font-size:   1.4rem;
  font-weight: normal;
  color:       #b9a06a;
  white-space: nowrap;
  text-shadow: 1px 1px 1px #000;
}
/* The name field and the share field share the SAME box height + width (user 2026-07-11): both
 * fill their equal-width column and use one fixed height, dark fill + gold border (the same look as
 * the Description textarea + Add-Named inputs). The share link just runs at a smaller font to fit
 * the longer URL inside the identical box. */
.bng-build-name-input,
.bng-build-share-field {
  width:         100%;
  box-sizing:    border-box;
  height:        4.2rem;                 /* SAME height for both boxes */
  background:    rgba(0, 0, 0, 0.35);
  border:        0.15rem solid #8a6f3c;
  border-radius: 0.4rem;
}
.bng-build-name-input {
  padding:     0 1.1rem;
  font-family: inherit;
  font-size:   2.2rem;                   /* the prominent build name */
  color:       #ffe9b0;
  outline:     none;
  transition:  border-color 0.12s, background 0.12s;
}
.bng-build-name-input:hover { border-color: #c9a24a; }
.bng-build-name-input:focus { border-color: #e0b75a; background: rgba(0, 0, 0, 0.5); }
/* The share field: same box, holding the full-URL input + a Copy button on the right. */
.bng-build-share-field {
  display:     flex;
  align-items: center;
  padding:     0 0.4rem 0 1.1rem;        /* tighter right padding - the Copy button sits there */
  overflow:    hidden;
}
.bng-build-share-field:focus-within { border-color: #e0b75a; background: rgba(0, 0, 0, 0.5); }
.bng-build-share-field.is-disabled { opacity: 0.5; }
.bng-build-share-hint { color: #b9a06a; font-size: 1.5rem; }
.bng-build-share-slug {
  flex:        1 1 auto;
  min-width:   0;
  border:      none;
  background:  none;
  outline:     none;
  padding:     0;
  font-family: inherit;
  font-size:   1.4rem;                   /* smaller than the name - a full URL is longer */
  color:       #ffe9b0;
}
/* Copy-the-link button, inside the share box on the right. It copies SILENTLY - nothing appears on
 * click: no tag, no popup, no message (user 2026-07-11: "I want nothing to appear when clicking copy"). */
.bng-build-share-copy {
  flex:          0 0 auto;
  margin-left:   0.5rem;
  padding:       0.35rem 0.9rem;
  font-family:   inherit;
  font-size:     1.3rem;
  color:         #e6d4a6;
  background:    #382d17;
  border:        0.1rem solid #8a6f3c;
  border-radius: 0.3rem;
  cursor:        pointer;
  white-space:   nowrap;
}
.bng-build-share-copy:hover { background: #4a3b1e; border-color: #c9a24a; color: #fff4d6; }
/* Slug-save feedback line, floated BELOW the share box (out of flow) so a message never moves the
 * box. Error tone by default, green on a successful save. */
.bng-build-share-msg {
  position:   absolute;
  top:        100%;
  left:       0;
  right:      0;
  margin-top: 0.3rem;
  font-size:  1.3rem;
  color:      #d98a6a;
}
.bng-build-share-msg.is-ok { color: #9fbf8a; }
.bng-builds-header .bng-step-btn.is-saving { opacity: 0.6; pointer-events: none; }

/* Stash "workbench" hint (builds editor only): a line at the top of the Stash panel telling
 * the maker the inventory is build-time scratch, not part of the shared build. The BB item
 * grid is pushed down + shortened by the same amount so nothing overlaps (grid was top:0 /
 * height:44.4rem - inventory_list.css). Scoped to .is-builds; the published view hides the
 * whole Stash tab, and the normal editor has no hint element. Bespoke, no BB source. */
.is-builds .character-screen-container .inventory-list-module .stash-hint {
  position:    absolute;
  top:         0;
  left:        0.5rem;
  right:       0.5rem;
  padding:     0.3rem 0.3rem 0.6rem;
  color:       #9a9078;
  line-height: 1.8rem;
  z-index:     2;
}
.is-builds .character-screen-container .inventory-list-module .l-list-container {
  top:    4.6rem;      /* clear the hint above */
  height: 39.8rem;     /* 44.4rem - 4.6rem, so the grid still ends above the footer */
}

/* Description tab (per-brother free text). ONE textarea fills the right panel; parchment-dark
 * fill + gold border match the picker search box (additem.css). Newlines are kept (textarea +
 * white-space: pre-wrap for the read-only render). Bespoke, no BB source. */
/* A full right-panel tab like Stash/Perks/Retinue, so it takes the SAME absolute inset below
 * the tab header (top:3.5rem, as .perks-module/.retinue-module). Without it the panel was
 * static and its intro text overlapped the tab bar (user 2026-07-11). */
.description-module {
  position:       absolute;
  top:            3.5rem;
  left:           0.5rem;
  right:          0.5rem;
  bottom:         4.0rem;        /* clear the formation strip below (matches perks.css .perks-module bottom); was 1.0rem and overlapped it (user 2026-07-11) */
  padding:        1.0rem 0.5rem 0;
  display:        flex;          /* the active mode wrapper fills the panel */
  flex-direction: column;
  overflow:       hidden;        /* the panel never scrolls; the textarea fits exactly */
}
/* Edit + read mode wrappers each fill the panel: the input/preview stretches, the Save/Edit
 * button row sits at the bottom. Only one is displayed at a time (builds_description.js). */
.build-description-edit,
.build-description-read {
  flex:           1;
  min-height:     0;
  display:        flex;
  flex-direction: column;
}
.build-description-actions {
  flex:            0 0 auto;
  display:         flex;
  justify-content: center;
  padding-top:     0.8rem;
}
/* Save / Edit button: the BB button-7 tab skin, fixed-sized (base rule is width/height 100%,
 * background-size 17.4rem - override both so the sprite fits). .ui-control keeps it above the
 * same-specificity base in right_panel_header.css. */
.character-screen-container .build-description-btn.ui-control.button-7,
.character-screen-container .build-description-btn.ui-control.button-7:hover,
.character-screen-container .build-description-btn.ui-control.button-7.is-selected {
  width:           14.0rem;
  height:          3.4rem;
  position:        relative;
  background-size: 14.0rem 3.4rem;
}
.build-description-input {
  display:       block;
  width:         100%;
  flex:          1;              /* fill the remaining panel height (no fixed min-height) */
  min-height:    0;              /* let the flex item shrink to fit instead of overflowing */
  box-sizing:    border-box;
  resize:        none;
  padding:       1.0rem 1.2rem;
  color:         #d6c7a8;
  background:    rgba(0, 0, 0, 0.30);
  border:        1px solid rgba(221, 162, 31, 0.45);
  border-radius: 0.3rem;
  outline:       none;
  white-space:   pre-wrap;
  line-height:   2.2rem;
}
.build-description-input:focus { border-color: #dda21f; }
.build-description-input::placeholder { color: rgba(214, 199, 168, 0.50); }
/* Read-only published view: the description as plain text (NOT an input), filling the panel;
 * newlines kept, scrolls if long. (user 2026-07-11) */
.build-description-view {
  flex:          1;
  min-height:    0;
  overflow-y:    hidden;         /* never scroll vertically (user 2026-07-11) */
  padding:       1.0rem 1.2rem;
  color:         #d6c7a8;
  white-space:   pre-wrap;
  overflow-wrap: anywhere;       /* a long URL wraps instead of overflowing (was the vertical-scroll trigger) */
  line-height:   2.2rem;
}
/* Clickable links in a rendered description (builds_description.js linkifies http(s) URLs).
 * BB gold accent (#dda21f, scaffold.css .font-color-value); bespoke, no BB source. */
.build-description-view .build-description-link {
  color:           #dda21f;
  text-decoration: underline;
}
.build-description-view .build-description-link:hover { color: #f0b121; }

/* Add-Brother popup (user 2026-07-11): the build-creation dialog (name + target level + base
 * stats) add_brother.js builds. Reuses the BB confirm-popup chrome (levelup.css: parchment
 * frame + centred header + Cancel/Create footer) + the ONE .confirm-content text size; only
 * LAYOUT is overridden on the content (left-aligned, wider, scroll) per the one-font rule. The
 * number/name fields borrow the dark-field + gold-border look from the Add-Named wizard inputs
 * (additem.css .named-stat-input) so every editor field matches. Bespoke, no BB source (BB has
 * no build-creation screen). */
/* Use the SAME chrome as the Add-Helmet / Add-Weapon pickers (user 2026-07-11): the create-brother
 * dialog is a .skills-popup (80x72rem + skills-edit-content 52.5rem scroll area with the BB grip via
 * bbScroll, skills.css) - NOT the small confirm-popup, whose .confirm-content is a fixed 12rem centred
 * box that trapped the form in a tiny scroll window. Left-align + pad the form; set the canonical
 * 1.6rem body size (scaffold.css .text-font-medium) since confirm-content's font was scoped to
 * confirm-popup and no longer applies here. */
.character-screen .ui-control.popup-dialog.skills-popup.create-brother-popup > .content.skills-edit-content {
  padding:     0 4.0rem;
  text-align:  left;
  font-size:   1.6rem;
  line-height: 2.2rem;
  color:       #d6c7a8;   /* the confirm-content body colour (levelup.css) */
}
/* Two-button footer (Cancel | Create): the .skills-popup footer is written for ONE centred button,
 * so restate the side-by-side geometry, copied from additem.css:169-190 (Add-item picker footer). */
.character-screen .ui-control.popup-dialog.skills-popup.create-brother-popup > .footer .l-button-bar.has-two-buttons { width: 38.0rem; }
.character-screen .ui-control.popup-dialog.skills-popup.create-brother-popup > .footer .l-cancel-button { left: 0; right: auto; width: 17.0rem; margin: 0; line-height: 3.0rem; }
.character-screen .ui-control.popup-dialog.skills-popup.create-brother-popup > .footer .l-ok-button { left: auto; right: 0; width: 17.0rem; margin: 0; line-height: 3.0rem; }
.create-brother-popup .cb-field {
  display:     flex;
  align-items: center;
  gap:         1.0rem;
  margin:      1.4rem 0;
}
.create-brother-popup .cb-field > label { flex: 0 0 7rem; color: #9a9078; }
.create-brother-popup .cb-stats {
  display: flex;
  gap:     3.0rem;
  margin:  2.6rem 0 0.4rem;
}
.create-brother-popup .cb-stats-col { flex: 1 1 0; min-width: 0; }
.create-brother-popup .cb-stat-row {
  display:     flex;
  align-items: center;
  gap:         0.8rem;
  margin:      1.1rem 0;
}
.create-brother-popup .cb-stat-icon { width: 2.4rem; height: 2.4rem; flex: 0 0 auto; }
.create-brother-popup .cb-stat-row > label { flex: 1 1 auto; color: #9a9078; }
/* Dark field + gold border, copied from additem.css .named-stat-input (Add-Named wizard) so all
 * editor number fields look the same; font-size inherits .confirm-content (the one-font rule). */
.create-brother-popup input {
  padding:       0.2rem 0.6rem;
  background:    rgba(0, 0, 0, 0.35);
  border:        1px solid rgba(221, 162, 31, 0.55);
  border-radius: 0.4rem;
  color:         #f1d27a;
  font-weight:   bold;
  text-align:    center;
  box-sizing:    border-box;
}
.create-brother-popup input:focus { border-color: #dda21f; outline: none; }
.create-brother-popup .cb-name-input { flex: 1 1 auto; text-align: left; }
.create-brother-popup .cb-stat-input,
.create-brother-popup .cb-level-input { width: 6.4rem; flex: 0 0 auto; }
/* No native number spinner (matches additem.css .named-stat-input). */
.create-brother-popup input[type="number"]::-webkit-outer-spin-button,
.create-brother-popup input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.create-brother-popup input[type="number"] { -moz-appearance: textfield; }
.create-brother-popup .cb-note { margin-top: 1.2rem; color: #b9a06a; font-style: italic; }