/* Add-item picker (Add Shield) — 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 inventory-slot tiles,
 * the single-select highlight, the disabled-Confirm state, and the two-button
 * footer (Cancel | Confirm). */

/* A real CSS GRID, NOT float (user 2026-06-15: "just do it properly in floating, the
 * grid"). float staggered the rows whenever an item name wrapped to two lines (a
 * taller tile caught the next row); a grid lays every item into a fixed cell so rows
 * always break cleanly. NINE columns across, matching BB's inventory grid (9 slots per
 * row — user 2026-06-16 "show nine, it's what people are used to"); the 90rem dialog
 * (skills.css) gives 80rem of content, so nine 7.4rem slots fit (8.6rem/cell). The
 * fixed two-line name height below keeps the cells uniform. */
.character-screen .additem-popup .skill-chip-grid
{
    width:                 100%;
    display:               grid;
    grid-template-columns: repeat(9, 1fr);
    gap:                   0.8rem 0.3rem;
    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. */
.character-screen .additem-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
{
    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). */
.character-screen .additem-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 { color: #b09a6e; }
.character-screen .additem-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 { background: rgba(221, 162, 31, 0.10); }
.character-screen .additem-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
{
    border-color: #dda21f;
}

/* One selectable tile: a BB inventory 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 stays a fixed 7.4rem, centred. */
.character-screen .additem-popup .additem-tile
{
    padding-top: 0.3rem;
    text-align:  center;
    cursor:      pointer;
}

/* BB: ui/controls/item.css L34-52 — the 7.4rem parchment inventory slot, the SAME
 * sprite the stash grid uses (inventory_list.css .item.is-list-item). */
.character-screen .additem-popup .additem-slot
{
    width:    7.4rem;
    height:   7.4rem;
    margin:   0 auto;
    position: relative;

    background-image:  url("/bb/images/ui/inventory/inventory_slot.png");
    background-size:   7.4rem 7.4rem;
    background-repeat: no-repeat;
}

.character-screen .additem-popup .additem-slot .image-layer
{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}

/* object-fit: contain so a non-square inventory image is letterboxed inside the
 * square slot instead of being squeezed (the squeeze the user reported). */
.character-screen .additem-popup .additem-slot .image-layer img
{
    width:      100%;
    height:     100%;
    object-fit: contain;
}

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

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

/* 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;
}