/* Add-item picker. THIS PROJECT'S OWN UI (BB has no add-item screen, so no BB citation
 * applies, like skills.css's editor section). The modal reuses the .popup-dialog /
 * .skills-popup parchment chrome (levelup.css + skills.css); this file styles the picker's
 * own pieces: the tile that WRAPS the shared company-stash slot (each item is drawn into a
 * real .is-list-item slot by the ONE inventory renderer, moves.js paintItemIcon, so a picker
 * item looks exactly like a grid item - user 2026-07-11), the single-select highlight, the
 * disabled-Confirm state, and the two-button footer (Cancel | Confirm). */

/* NINE 7.4rem item slots per row, packed EXACTLY like the company stash grid. A CSS grid
 * (not float) only so a name wrapping to two lines can't stagger the next row; otherwise
 * the layout is dumb and identical to the stash: FIXED 7.4rem columns (BB item.css L34-52
 * slot width, the exact stash-cell size) with ZERO column-gap, so slots sit edge-to-edge
 * just like the floated stash cells. NOT elastic `1fr`: 1fr stretched each column to fill
 * the dialog, so the spare margin around each 7.4rem slot changed with the dialog's content
 * width (scrollbar or not) and every picker showed different spacing, none matching the
 * stash (the bug the user kept reporting). Fixed columns render the same in every dialog.
 * Nine per row (user 2026-06-16). The row-gap leaves room for the fixed two-line name. */
.character-screen .additem-popup .skill-chip-grid
{
    display:               grid;
    grid-template-columns: repeat(9, 7.4rem);
    gap:                   0.8rem 0;
    justify-content:       start;
    align-items:           start;
}

/* Name search box (additem.js) — a plain substring filter over the item names. THIS
 * PROJECT'S OWN UI (no BB add-item screen). clear:both drops it below the floated
 * section title; the parchment-dark fill + gold border match the dialog chrome.
 * SHARED (user 2026-07-10): the same search box + sort bar are reused by the Background
 * picker (background.js) and Traits picker (skills.js), whose dialog is .skills-popup,
 * not .additem-popup, so each selector below covers BOTH popup families (ONE definition).
 * The .additem-tile rules further down stay .additem-popup-only (they wrap the shared
 * .is-list-item item slot; the skills pickers use their own .skill-chip). */
.character-screen .additem-popup .additem-search,
.character-screen .skills-popup .additem-search
{
    clear:         both;
    display:       block;
    width:         40.0rem;
    max-width:     100%;
    margin:        0.4rem 0 1.0rem;
    padding:       0.6rem 1.0rem;
    color:         #d6c7a8;
    background:    rgba(0, 0, 0, 0.30);
    border:        1px solid rgba(221, 162, 31, 0.45);
    border-radius: 0.3rem;
    outline:       none;
}

.character-screen .additem-popup .additem-search::placeholder,
.character-screen .skills-popup .additem-search::placeholder
{
    color: rgba(214, 199, 168, 0.50);
}

/* Sort bar in the equipment pickers (user 2026-06-17): a label + clickable sort
 * chips; the active one is highlighted gold (same toggle look as the named wizard's
 * prefix/suffix modes). Shared with the Background + Traits pickers (see note above). */
.character-screen .additem-popup .additem-sortbar,
.character-screen .skills-popup .additem-sortbar
{
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         0.8rem;
    width:       100%;
    margin:      0.2rem 0 0.8rem;
}
.character-screen .additem-popup .additem-sort-label,
.character-screen .skills-popup .additem-sort-label { color: #b09a6e; }
.character-screen .additem-popup .additem-sort-btn,
.character-screen .skills-popup .additem-sort-btn
{
    cursor:        pointer;
    padding:       0.3rem 1.0rem;
    color:         #d6c7a8;
    border:        1px solid rgba(221, 162, 31, 0.45);
    border-radius: 0.3rem;
}
.character-screen .additem-popup .additem-sort-btn:hover,
.character-screen .skills-popup .additem-sort-btn:hover { background: rgba(221, 162, 31, 0.10); }
.character-screen .additem-popup .additem-sort-btn.is-on,
.character-screen .skills-popup .additem-sort-btn.is-on
{
    color:        #dda21f;
    border-color: #dda21f;
    background:   rgba(221, 162, 31, 0.18);
}

.character-screen .additem-popup .additem-search:focus,
.character-screen .skills-popup .additem-search:focus
{
    border-color: #dda21f;
}

/* One selectable tile: the shared company-stash slot + the item name, so an item reads the
 * same way it does in the stash grid (user 2026-06-15: "make them look like in the
 * inventory"). The grid column sizes the tile; the slot below is centred under the name. */
.character-screen .additem-popup .additem-tile
{
    padding-top: 0.3rem;
    text-align:  center;
    cursor:      pointer;
}

/* The item slot IS a real company-stash slot now: chip() builds .ui-control.item.is-list-item
 * and paints it via moves.js paintItemIcon, so the 7.4rem box, the inventory_slot.png
 * background, the relative .image-layer, and the icon sizing ALL come from inventory_list.css /
 * paintItemIcon - ONE definition, shared with the grid (user 2026-07-11: every dialog shows
 * inventory items exactly like the inventory). The stash-grid float:left is scoped to the
 * list module (inventory_list.css), so this slot is un-floated; the grid column centres it
 * and it becomes the positioning context for the point-mode price badge. */
.character-screen .additem-popup .additem-tile .is-list-item
{
    margin:   0 auto;
    position: relative;
}

.character-screen .additem-popup .additem-tile:hover .is-list-item
{
    background-color: rgba(221, 162, 31, 0.10);
}

/* The picked item: a gold frame + wash on its slot (matches the dialog's gold
 * title / section headings). */
.character-screen .additem-popup .additem-tile.is-selected .is-list-item
{
    outline:          0.3rem solid #dda21f;
    outline-offset:  -0.3rem;
    background-color: rgba(221, 162, 31, 0.18);
}

/* DLC-locked tile: the save lacks the paid DLC that unlocks this item, so it's shown
 * greyed + inert; the hover tooltip names the missing DLC (window.MISSING_DLC). This is
 * the project's own add-item screen (BB has no add-item UI), so there is no BB port to
 * cite. Greyed like .add-last-big.is-disabled (opacity + grayscale). NOT
 * pointer-events:none — the tile must still receive hover so its DLC tooltip shows;
 * additem.js's openPicker click guard makes it unselectable. */
.character-screen .additem-popup .additem-tile.is-dlc-locked
{
    filter:  grayscale(1);
    opacity: 0.4;
    cursor:  default;
}
/* No hover gold-wash on a locked tile (it can't be picked). */
.character-screen .additem-popup .additem-tile.is-dlc-locked:hover .is-list-item
{
    background-color: transparent;
}

/* Fixed TWO-line height (not max-height): a one-line name reserves the same space as
 * a two-line one, so every tile is exactly as tall and the flex rows align. */
.character-screen .additem-popup .additem-name
{
    margin-top:  0.2rem;
    color:       #d6c7a8;
    line-height: 1.4rem;
    height:      2.8rem;
    overflow:    hidden;
}

/* --- two-button footer (Cancel | Confirm) -----------------------------------
 * The .skills-popup footer rules (skills.css) are written for a SINGLE centered
 * button, so for this modal restate the side-by-side geometry and give the two
 * buttons a clear gap — without this the skills one-button rule centered the OK
 * button on top of Cancel (they overlapped). The .skills-popup.additem-popup
 * selector outranks the .skills-popup-only rules. */
.character-screen .ui-control.popup-dialog.skills-popup.additem-popup > .footer .l-button-bar.has-two-buttons
{
    width: 38.0rem;
}

.character-screen .ui-control.popup-dialog.skills-popup.additem-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.additem-popup > .footer .l-ok-button
{
    left:        auto;
    right:       0;
    width:       17.0rem;
    margin:      0;
    line-height: 3.0rem;
}

/* Confirm is inert until a shield is selected — dim it + drop the pointer so it
 * reads as unavailable (you can't add "nothing"). */
.character-screen .ui-control.popup-dialog.skills-popup.additem-popup > .footer .l-ok-button.is-disabled
{
    opacity:        0.4;
    pointer-events: none;
}

/* === Add-Named (fame) item WIZARD (named.js) — THIS PROJECT'S OWN UI ==========
 * The wizard reuses the .additem-popup chrome (grid, tiles, search, footer); these
 * rules style its extra steps: the type grid, the stat sliders, the variant tiles,
 * and the name selects. */

/* The wizard's content is SEQUENTIAL blocks (title, then a grid/rows/selects). The
 * shared .skills-section-title floats left (skills.css) — fine for the flat pickers
 * (one 100%-wide grid follows it) but here it makes the next block flow beside/over
 * it. Un-float it in the wizard so every step stacks cleanly inside the dialog. */
.character-screen .named-popup .skills-section-title
{
    float:      none;
    clear:      both;
    width:      100%;
    margin-top: 0.8rem;
}
/* Every wizard step block spans the content and starts on its own line. */
.character-screen .named-popup .named-cat-grid,
.character-screen .named-popup .named-variant-grid,
.character-screen .named-popup .named-look-solo,
.character-screen .named-popup .named-stat-row,
.character-screen .named-popup .named-choose-hint,
.character-screen .named-popup .named-choose-note,
.character-screen .named-popup .named-name-modes,
.character-screen .named-popup .named-select-row,
.character-screen .named-popup .named-name-preview,
.character-screen .named-popup .additem-search
{
    clear: both;
    width: 100%;
}

/* Wizard body text minimum — every row inherits at least the 1.6rem dialog size
 * (README "ONE font size for all popup/tooltip/dialog text"); the user found the
 * unset rows rendering too small (user 2026-06-17: "increase the font size"). */
.character-screen .named-popup .content { font-size: 1.6rem; line-height: 2.2rem; }
.character-screen .named-popup .named-choose-hint
{
    margin:      0.6rem 0 0.4rem;
    color:       #d6c7a8;
    line-height: 2.2rem;
}

/* Step 1 — the four item-type tiles (one row): each is the real paperdoll image of an
 * example named design (greatsword / leopard armor / heraldic helmet / sipar shield)
 * with a big label under it (user 2026-06-17). */
.character-screen .named-popup .named-cat-grid
{
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1.0rem;
    margin:                0.6rem 0;
}
.character-screen .named-popup .named-cat-tile
{
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: flex-end;
    gap:             0.6rem;
    padding:         1.0rem 0.6rem;
    text-align:      center;
    color:           #d6c7a8;
    cursor:          pointer;
    background:      rgba(0, 0, 0, 0.25);
    border:          1px solid rgba(221, 162, 31, 0.45);
    border-radius:   0.3rem;
}
.character-screen .named-popup .named-cat-img
{
    width:      100%;
    height:     11.0rem;
    object-fit: contain;
}
.character-screen .named-popup .named-cat-tile:hover { background: rgba(221, 162, 31, 0.10); }
.character-screen .named-popup .named-cat-tile.is-selected
{
    color:        #dda21f;
    border-color: #dda21f;
    background:   rgba(221, 162, 31, 0.18);
}
/* Single-look designs: just show the one paperdoll image above the name selects. */
.character-screen .named-popup .named-look-solo
{
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      16.0rem;
    margin:          0.6rem 0;
}

/* Step 3 — variant tiles (only when the design has a range). Each shows the BIG
 * paperdoll image of that variant (user 2026-06-16: "make it big and beautiful"). */
.character-screen .named-popup .named-variant-grid
{
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1.0rem;
    margin:                0.6rem 0;
}
.character-screen .named-popup .named-variant-tile
{
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      16.0rem;
    padding:         0.8rem;
    cursor:          pointer;
    background:      rgba(0, 0, 0, 0.25);
    border:          1px solid rgba(221, 162, 31, 0.45);
    border-radius:   0.3rem;
}
.character-screen .named-popup .named-variant-tile:hover { background: rgba(221, 162, 31, 0.10); }
.character-screen .named-popup .named-variant-tile.is-selected
{
    border-color: #dda21f; background: rgba(221, 162, 31, 0.18);
}
.character-screen .named-popup .named-variant-img
{
    max-width:  100%;
    max-height: 15.0rem;
    object-fit: contain;
}

/* Step 4 — one big stat roll per row: [check] | label + range | [ − value + ].
 * Roomy rows that fill the dialog (user 2026-06-17: rows were tiny with empty space).
 * The number field is ported from the bb-wiki damage calculator's "Edit Weapon Stats"
 * input (webapp/static/style.css .stat-input: dark field, gold border, gold bold text)
 * recoloured to this wizard's parchment-gold palette, wrapped in big −/+ step buttons. */
.character-screen .named-popup .named-stat-row
{
    display:       flex;
    align-items:   center;
    gap:           1.4rem;
    padding:       1.0rem 0.4rem;
    border-bottom: 1px solid rgba(221, 162, 31, 0.16);
    color:         #d6c7a8;
}
.character-screen .named-popup .named-stat-row.is-off { opacity: 0.55; }
.character-screen .named-popup .named-stat-check
{
    cursor: pointer; width: 3.0rem; flex: 0 0 auto;
    font-size: 2.4rem; line-height: 1; color: #dda21f; text-align: center;
}
.character-screen .named-popup .named-stat-labelbox
{
    flex: 1; display: flex; flex-direction: column; gap: 0.2rem;
}
.character-screen .named-popup .named-stat-label { font-size: 2.0rem; font-weight: bold; color: #e7d8b5; }
.character-screen .named-popup .named-stat-range { font-size: 1.4rem; color: #b09a6e; }
.character-screen .named-popup .named-stat-edit { display: flex; align-items: center; gap: 1.0rem; flex: 0 0 auto; }
.character-screen .named-popup .named-stat-sep { color: #d6c7a8; font-size: 2.0rem; }
.character-screen .named-popup .named-stepper { display: flex; align-items: center; gap: 0.6rem; }
.character-screen .named-popup .named-stepper.is-off { opacity: 0.5; }
.character-screen .named-popup .named-step-btn
{
    width: 3.6rem; height: 3.6rem; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem; line-height: 1; font-weight: bold;
    color: #dda21f; cursor: pointer;
    background: rgba(221, 162, 31, 0.12);
    border: 1px solid rgba(221, 162, 31, 0.55); border-radius: 0.4rem;
}
.character-screen .named-popup .named-step-btn:hover { background: rgba(221, 162, 31, 0.28); }
.character-screen .named-popup .named-step-btn:disabled { opacity: 0.4; cursor: not-allowed; background: rgba(221, 162, 31, 0.06); }
.character-screen .named-popup .named-stat-input
{
    width:         8.0rem;
    height:        3.6rem;
    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-size:     2.0rem;
    font-weight:   bold;
    text-align:    center;
}
/* No native spinner — the −/+ buttons do the stepping. */
.character-screen .named-popup .named-stat-input::-webkit-outer-spin-button,
.character-screen .named-popup .named-stat-input::-webkit-inner-spin-button
{
    -webkit-appearance: none; margin: 0;
}
.character-screen .named-popup .named-stat-input { -moz-appearance: textfield; }
.character-screen .named-popup .named-stat-input:disabled { opacity: 0.55; cursor: not-allowed; }
.character-screen .named-popup .named-choose-note { margin: 1.0rem 0 0.2rem; color: #dda21f; }

/* Step 5 — name selects + the live preview. */
.character-screen .named-popup .named-name-modes { display: flex; gap: 1.0rem; margin: 0.4rem 0 0.8rem; }
.character-screen .named-popup .named-mode
{
    cursor: pointer; padding: 0.5rem 1.2rem; color: #d6c7a8;
    border: 1px solid rgba(221, 162, 31, 0.45); border-radius: 0.3rem;
}
.character-screen .named-popup .named-mode.is-on { color: #dda21f; border-color: #dda21f; background: rgba(221, 162, 31, 0.18); }
.character-screen .named-popup .named-select-row { display: flex; align-items: center; gap: 1.2rem; padding: 0.6rem 0; }
.character-screen .named-popup .named-select-label { width: 9.0rem; font-size: 1.8rem; color: #e7d8b5; }
/* Solid dark field + explicit option colours so the dropdown is readable — the old
 * translucent field rendered as low-contrast light-on-grey (user 2026-06-17). */
.character-screen .named-popup .named-select
{
    flex: 1; padding: 0.7rem 1.0rem; font-size: 1.8rem; font-weight: bold;
    color: #f1d27a; background-color: #1a1206;
    border: 1px solid rgba(221, 162, 31, 0.6); border-radius: 0.4rem; cursor: pointer;
}
.character-screen .named-popup .named-select option { color: #f1d27a; background-color: #1a1206; }
.character-screen .named-popup .named-name-preview
{
    margin-top: 1.4rem; text-align: center; color: #f1d27a; font-style: italic;
    min-height: 2.4rem; font-size: 2.0rem; font-weight: bold;
}

/* "Add last item again" (user 2026-07-08) — THIS PROJECT'S OWN UI, budget/point mode only.
 * A single global button in the left margin (the .is-point rules clear the per-brother left
 * edit buttons out of that column). Positioned like the left edit actions (left:-11.5rem),
 * sized BIG like the right-margin "Add Named" headline button. */
.character-screen-container .point-readd
{
    position: absolute;
    left:     -11.5rem;        /* same left margin as .left-edit-actions (levelup.css) */
    top:      12.0rem;         /* under Level Up (.left-top-actions top:6rem) in the free column */
    width:    11.0rem;
    z-index:  12;
}
/* Big — copied from .add-named-big (resources.css:257-275): double height + a bigger,
 * centered label. The `.button-7` in the selector outranks levelup.css's fixed height. */
.character-screen-container .point-readd .add-last-big.button-7,
.character-screen-container .point-readd .add-last-big.button-7:hover,
.character-screen-container .point-readd .add-last-big.button-7.is-selected
{
    height:          4.8rem;                 /* 2x the normal 2.4rem */
    background-size: 11.0rem 4.8rem;         /* fill the full double height in every state */
}
.character-screen-container .point-readd .add-last-big.button-7 > .label
{
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    white-space:     normal;                 /* let the long label wrap onto two lines */
    margin:          0;
    font-size:       1.6rem;
    line-height:     1.8rem;
}
/* Greyed + inert until the first add (mirrors .heal-button.is-disabled, levelup.css:103-111):
 * strip the blue edit-action affordance and gray it. NOT pointer-events:none — the button
 * must still receive hover so its data-tip shows; additem.js guards the click. */
.character-screen .point-readd .add-last-big.is-disabled,
.character-screen .point-readd .add-last-big.is-disabled:hover
{
    box-shadow:   none;
    border-color: #555;
    opacity:      0.5;
    cursor:       default;
}
.character-screen .point-readd .add-last-big.is-disabled .label { color: #9a9a9a !important; }