/* ============================================
   Name Search (/name-search/) styles
   Split out of global.css; loaded after it by includes/header.php
   on this page only. Rules keep their original relative order.
   ============================================ */

/* ============================================
   NAME CHECKER
   ============================================ */

.name-search .grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.name-search .result { margin-top: 20px; padding: 16px; border-radius: 10px; background: rgba(255,255,255,0.02); border: 1px solid var(--color-border-light); display: none; margin-top: 8px; font-size: 0.85rem; color: var(--color-text-muted); }
.name-search .actions { display: flex; gap: 10px; margin-top: 16px; }
.name-search .btn { width: 100%; }
.name-search .btn-wrapper { display: flex; align-items: flex-end; }
.name-search .progress-container.hidden { display: none; }
.name-search .names-wrapper { margin-top: 16px; }
.name-search #checkBtn { margin-top: 24px; }

@media (max-width: 959px) {
    .name-search .result {
        text-align: center;
    }
}

@media (max-width: 640px) {
    .name-search .actions {
        flex-direction: column;
    }
    
    .name-search .result {
        padding: 12px;
    }
    
    .name-search textarea {
        min-height: 120px;
    }
}

@media (max-width: 400px) {
    .name-search .panel {
        padding: 16px;
    }
    
    .name-search .btn {
        padding: 12px 16px;
    }
}

@media (min-width: 959px) {
    /* Region, realm, name, button; WoW Forever adds the last name */
    /* Name first and widest, then realm, region and the button */
    .name-search .grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 128px 170px; align-items: start; }
    .name-search .ns-tool[data-game="forever"] #single .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 128px 170px; }
    .name-search .grid-batch { grid-template-columns: minmax(0, 1fr) 128px; }
}

@media (max-width: 958px) {
    .name-search #checkBtn { margin-top: 0; }
    
    /* Name search table responsive - stack rows */
    .name-search thead {
        display: none;
    }
    
    .name-search table {
        width: 100%;
        display: block;
    }
    
    .name-search tbody {
        display: block;
    }
    
    .name-search tr {
        display: flex;
        flex-direction: column;
        padding: 12px 0;
        border-bottom: 1px solid var(--color-border);
    }
    
    .name-search td {
        display: block;
        width: 100% !important;
        min-width: 100% !important;
        padding: 4px 0;
        text-align: center;
    }
    
    .name-search td:first-child {
        width: 100% !important;
        min-width: 100% !important;
    }
    
    #batchTable table {
        width: 100%;
        display: block;
    }
    
    #batchTable thead {
        display: none;
    }
    
    #batchTable tbody {
        display: block;
    }
    
    #batchTable tr {
        display: flex;
        flex-direction: column;
        padding: 12px 0;
        border-bottom: 1px solid var(--color-border);
    }
    
    #batchTable td {
        display: block;
        width: 100% !important;
        padding: 4px 0;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .name-search .actions { flex-direction: column; }
}


@media (max-width: 959px) {
    .help {
        text-align: center;
    }
    
    .grid .help {
        text-align: left;
    }
    
    .name-search th,
    .name-search td {
        border-bottom: 0;
    }
}

/* Fields on the dashboard Filters panel's scale: labels 0.72rem caps at
   700, values 0.92rem at 500 (the Search / Check names size), placeholders
   regular, and our own select chevron inset from the edge. */
.name-search label[for] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.name-search :is(#region, #realm, #regionB, #realmB, #name, #nameLast, #names) {
    font-size: 0.92rem;
    font-weight: 500;
}

.name-search :is(#name, #nameLast, #names)::placeholder {
    font-weight: 400;
}

.name-search :is(#region, #realm, #regionB, #realmB) {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 15px 15px;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* ============================================
   WHICH GAME (Retail, a Classic version, WoW Forever)
   The same choice as the header switcher, big here because the answer
   depends on it. Real radios under card labels; accents from global.css
   (--game-retail / --game-classic / --game-forever).
   ============================================ */

/* Parts that only show for one game */
.name-search .ns-tool:not([data-game="classic"]) [data-when="classic"],
.name-search .ns-tool:not([data-game="forever"]) [data-when="forever"],
.name-search .ns-tool[data-game="forever"] [data-when="not-forever"] {
    display: none;
}

/* Forever's disabled buttons read as waiting, not broken */
.name-search .ns-tool[data-game="forever"] :is(#checkBtn, #runBatch):disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


@media (max-width: 958px) {
    /* Stacked form: Forever's last name gets its own row like the rest */
    .name-search .ns-tool[data-game="forever"] #single .grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================
   Diagnostics (admins only; the panel isn't rendered for anyone else).
   Built like the dashboard's Show / Hide sections: the section header,
   the utility-button type (0.92rem/600, 17px icons), and the body closed
   until Show. The choice is remembered in the browser (wt_ns_diag_open).
   ============================================ */
.ns-diag .panel-header { align-items: center; gap: 16px; padding-bottom: 0; }
.ns-diag.is-expanded .panel-header { padding-bottom: 16px; }

.ns-diag__heading { min-width: 0; }
.ns-diag__heading h2 { display: flex; align-items: center; gap: 10px; margin: 0; }
.ns-diag__hint { margin: 4px 0 0; font-size: 0.85rem; color: var(--color-text-muted); }

/* The admin tag: the admin shield's gold, quiet */
.ns-diag__tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 209, 0, 0.28);
    background: rgba(255, 209, 0, 0.08);
    color: var(--color-wow-gold);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
}

/* Header buttons: the dashboard section-header treatment (dashboard.css
   "Utility buttons in the section headers"), and not the page's full-width buttons */
.name-search .ns-diag .panel-header-actions { flex-shrink: 0; }
.name-search .ns-diag .panel-header-actions .btn {
    width: auto;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 600;
}
.name-search .ns-diag .panel-header-actions .btn svg {
    width: 17px;
    height: 17px;
    transition: stroke 0.2s ease, color 0.2s ease;
}
.name-search .ns-diag .panel-header-actions .btn[hidden] { display: none; }
/* Copy only matters with the response in view */
.name-search .ns-diag:not(.is-expanded) .ns-diag__copy { display: none; }
/* Show and Hide have no descenders: no lift, as on the dashboard; Copy (and
   "Copied") has a descender and rises 0.5px like the dashboard's Copy */
.ns-diag__toggle .btn-label { top: 0; }
.ns-diag__copy .btn-label { top: -0.5px; }

.ns-diag__meta {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-dark);
}
.ns-diag__meta.is-error { color: var(--color-error); }

.ns-diag__pre {
    margin: 0;
    max-height: 420px;
    overflow: auto;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    background: rgba(0, 0, 0, 0.35);
    color: var(--color-text-muted);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.8rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    tab-size: 2;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.ns-diag__pre:focus-visible { outline-offset: 2px; }

@media (max-width: 959px) {
    .ns-diag .panel-header { flex-direction: column; align-items: stretch; text-align: center; }
    .ns-diag__heading h2 { justify-content: center; }
    .name-search .ns-diag .panel-header-actions { margin-left: 0; justify-content: center; flex-wrap: wrap; gap: 8px; }
}

/* ============================================
   One name / A list: a segmented switch at the top of the form panel,
   with a line beside it saying what the picked mode does. The picked
   half is filled in the site blue, like the tabs it replaces.
   ============================================ */
.name-search .ns-mode {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.name-search .ns-mode__switch {
    display: inline-flex;
    flex-shrink: 0;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-full);
    background: rgba(8, 12, 20, 0.6);
}

.name-search .ns-mode__switch button {
    justify-content: center;
    padding: 8px 16px;
}

.name-search .ns-mode__switch button:not(.active) {
    background: none;
    color: var(--color-text-muted);
}

.name-search .ns-mode__switch button.active {
    background: var(--color-primary);
    color: #000;
}

.name-search .ns-mode__switch button:hover:not(.active),
.name-search .ns-mode__switch button:focus-visible:not(.active) {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: none;
    color: var(--color-text);
}

.name-search .ns-mode__switch button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-primary) 70%, transparent);
    outline-offset: 2px;
}

.name-search .ns-mode__hint {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* The stacked layout from 959px down, where the rest of the page stacks too
   (it used to start at 640px, leaving tablets with the desktop row) */
@media (max-width: 959px) {
    .name-search .ns-mode {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        text-align: center;
    }
    .name-search .ns-mode__switch {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================
   Results as nameplates (name-search.js "RESULTS"), built from the hero's
   plates: the name in gold, a Taken / Likely free tag. One name on one realm
   is a single big plate; every realm, or a list of names, is a summary (a bar
   split free / taken, and a filter) over a grid of small ones.
   ============================================ */
.name-search {
    --ns-free: var(--color-success);
    --ns-taken: var(--color-error);
}

/* A rich result drops the message box's own frame */
.name-search .result.is-rich,
.name-search #batchTable.is-rich {
    margin-top: 20px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 1rem;
    color: var(--color-text);
    text-align: left;
}

.name-search .ns-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.name-search .ns-tag--free  { background: rgba(128, 195, 66, 0.16); color: #b5e58a; }
.name-search .ns-tag--taken { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }

/* The line naming where: the game's icon in its color, then realm, region, game */
.name-search .ns-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 9px;
    margin: 10px 0 0;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.name-search .ns-meta__icon { display: inline-flex; }
.name-search .ns-meta__icon svg { width: 17px; height: 17px; }
.name-search .ns-meta--retail .ns-meta__icon  { color: var(--game-retail); }
.name-search .ns-meta--classic .ns-meta__icon { color: var(--game-classic); }
.name-search .ns-meta--forever .ns-meta__icon { color: var(--game-forever); }
.name-search .ns-meta__where { color: var(--color-text); font-weight: 600; }

.name-search .ns-meta__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}

.name-search .ns-caveat {
    margin: 18px 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-text-dark);
}

/* Secondary actions on a result: pills in the button type */
.name-search .ns-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.name-search .ns-action .btn-label { top: 0; }
.name-search .ns-action svg { transition: color 0.2s ease; }

.name-search .ns-action:hover,
.name-search .ns-action:focus-visible {
    border-color: var(--color-primary);
    background: rgba(39, 170, 226, 0.08);
    color: var(--color-text);
}

.name-search .ns-action:hover svg,
.name-search .ns-action:focus-visible svg { color: var(--color-primary); }

/* ---------- One name on one realm: the big plate ---------- */
.name-search .ns-verdict {
    --v: var(--ns-free);
    position: relative;
    overflow: hidden;
    padding: 26px 28px 24px;
    border: 1px solid color-mix(in srgb, var(--v) 30%, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    background:
        radial-gradient(90% 160% at 0% 0%, color-mix(in srgb, var(--v) 17%, transparent), transparent 62%),
        rgba(5, 9, 16, 0.72);
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9);
    animation: ns-rise 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.name-search .ns-verdict--taken { --v: var(--ns-taken); }

.name-search .ns-verdict__plate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.name-search .ns-verdict__name {
    font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--color-wow-gold);
    text-shadow: 0 0 28px rgba(255, 209, 0, 0.22);
    overflow-wrap: anywhere;
}

.name-search .ns-verdict .ns-tag {
    padding: 6px 13px;
    font-size: 0.86rem;
}

.name-search .ns-verdict__line {
    margin: 14px 0 0;
    font-size: 0.98rem;
    color: var(--color-text);
}

/* Wide screens: the plate and its line on the left, the actions stacked on the
   right in the space beside them, and the note across the bottom */
.name-search .ns-verdict {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 28px;
}

.name-search .ns-verdict > * { grid-column: 1; }
.name-search .ns-verdict > .ns-caveat { grid-column: 1 / -1; }

.name-search .ns-verdict__actions {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.name-search .ns-verdict__actions .ns-action { justify-content: center; }

/* ---------- Every realm, or a list: the summary and the grid ---------- */
.name-search .ns-sweep {
    padding: 24px 26px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background:
        radial-gradient(70% 120% at 0% 0%, rgba(255, 209, 0, 0.06), transparent 60%),
        rgba(5, 9, 16, 0.6);
    animation: ns-rise 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.name-search .ns-sweep__name {
    font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem);
    font-weight: 800;
    line-height: 1.05;
    color: var(--color-wow-gold);
    text-shadow: 0 0 28px rgba(255, 209, 0, 0.2);
    overflow-wrap: anywhere;
}

.name-search .ns-sweep__label {
    font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-text);
}

.name-search .ns-sweep__count {
    margin: 16px 0 8px;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

.name-search .ns-sweep__count strong {
    font-size: 1.3rem;
    font-weight: 800;
    color: #b5e58a;
}

/* Free fills from the left in green; what's left is taken */
.name-search .ns-sweep__bar {
    height: 8px;
    border-radius: var(--radius-full);
    background: rgba(239, 68, 68, 0.32);
    overflow: hidden;
}

.name-search .ns-sweep__bar span {
    display: block;
    width: var(--free);
    height: 100%;
    border-radius: inherit;
    background: var(--ns-free);
    box-shadow: 0 0 12px rgba(128, 195, 66, 0.5);
    animation: ns-fill 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both;
}

.name-search .ns-sweep__tools { margin-top: 18px; }
.name-search .ns-sweep__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.name-search .ns-filter {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-full);
    background: rgba(8, 12, 20, 0.6);
}

.name-search .ns-filter button {
    padding: 7px 14px;
    border: 0;
    border-radius: var(--radius-full);
    background: none;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.name-search .ns-filter button span {
    margin-left: 5px;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

.name-search .ns-filter button:hover:not(:disabled) { color: var(--color-text); background: rgba(255, 255, 255, 0.05); }
.name-search .ns-filter button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.12); color: var(--color-text); }
.name-search .ns-filter button:disabled { opacity: 0.4; cursor: default; }

.name-search .ns-filter button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-primary) 70%, transparent);
    outline-offset: 1px;
}

.name-search .ns-sweep[data-show="free"] .is-taken,
.name-search .ns-sweep[data-show="taken"] .is-free {
    display: none;
}

/* Every realm: small tiles, a dot for the verdict */
.name-search .ns-tiles,
.name-search .ns-plates {
    display: grid;
    gap: 8px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.name-search .ns-tiles { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.name-search .ns-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.88rem;
    animation: ns-rise 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 12ms);
}

.name-search .ns-tile__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.name-search .ns-tile.is-free .ns-tile__dot { background: var(--ns-free); box-shadow: 0 0 8px rgba(128, 195, 66, 0.7); }
.name-search .ns-tile.is-taken .ns-tile__dot { background: rgba(239, 68, 68, 0.75); }
.name-search .ns-tile__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.name-search .ns-tile.is-free .ns-tile__name { color: var(--color-text); font-weight: 600; }
.name-search .ns-tile.is-taken .ns-tile__name { color: var(--color-text-muted); }

.name-search .ns-tile__link,
.name-search .ns-plate__link {
    display: inline-flex;
    flex-shrink: 0;
    margin-left: auto;
    padding: 4px;
    border-radius: 6px;
    color: var(--color-text-muted);
}

.name-search .ns-tile__link:hover,
.name-search .ns-plate__link:hover,
.name-search .ns-tile__link:focus-visible,
.name-search .ns-plate__link:focus-visible { color: var(--color-primary); }

/* A list: each name its own plate, free ones first */
.name-search .ns-plates { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }

.name-search .ns-plate {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 11px 12px 11px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(5, 9, 16, 0.7);
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.9);
    animation: ns-rise 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 30ms);
}

.name-search .ns-plate__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-wow-gold);
}

.name-search .ns-plate.is-taken .ns-plate__name { color: color-mix(in srgb, var(--color-wow-gold) 45%, var(--color-text-muted)); }
.name-search .ns-plate .ns-tag { margin-left: auto; }
.name-search .ns-plate .ns-tag + .ns-plate__link { margin-left: 0; }

@keyframes ns-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@keyframes ns-fill {
    from { width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .name-search :is(.ns-verdict, .ns-sweep, .ns-tile, .ns-plate, .ns-sweep__bar span) { animation: none; }
}

@media (max-width: 640px) {
    .name-search .ns-verdict { padding: 22px 20px 20px; }
    .name-search .ns-sweep { padding: 20px 18px; }
    .name-search .ns-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .name-search .ns-plates { grid-template-columns: minmax(0, 1fr); }
    .name-search .ns-verdict { grid-template-columns: minmax(0, 1fr); }
    .name-search .ns-verdict__actions { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; margin-top: 18px; }
    .name-search .ns-verdict__actions .ns-action { flex: 1 1 auto; }
    /* The filter keeps one row: three equal parts across the width */
    .name-search .ns-filter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
    .name-search .ns-filter button { padding: 7px 4px; font-size: 0.8rem; white-space: nowrap; }
    .name-search .ns-filter button span { margin-left: 3px; }
}

/* ============================================
   The form at the site's scale (the home page lookups): 44px fields and
   buttons, 12px insets, a roomier panel, the name box first and widest.
   ============================================ */
.name-search .ns-form { padding: 24px 26px 26px; }
.name-search .ns-mode { margin-bottom: 24px; }
.name-search .ns-mode__switch button { padding: 10px 18px; }

.name-search .ns-form label[for] { display: block; margin-bottom: 7px; }

.name-search :is(#region, #realm, #regionB, #realmB, #name, #nameLast) {
    height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 13px;
}

.name-search :is(#name, #nameLast) { padding-right: 13px; }
.name-search :is(#region, #realm, #regionB, #realmB) { padding-right: 40px; }

.name-search #names {
    min-height: 196px;
    padding: 12px 14px;
    line-height: 1.6;
}

.name-search .ns-form .help {
    margin-top: 7px;
    font-size: 0.8rem;
}

/* Buttons at field height, lined up with the fields beside them */
.name-search #checkBtn,
.name-search #runBatch,
.name-search #exportCSV {
    height: 44px;
    padding: 0 18px;
    justify-content: center;
}

/* A list: Check names takes the width, Export sits beside it at its own size */
.name-search #batch .actions { gap: 12px; margin-top: 18px; }
.name-search #batch .actions #runBatch { flex: 1 1 auto; }
.name-search #batch .actions #exportCSV { flex: 0 0 auto; width: auto; min-width: 140px; }

@media (max-width: 640px) {
    .name-search .ns-form { padding: 20px 18px 22px; }
    .name-search #batch .actions #exportCSV { width: 100%; }
}

/* ============================================
   Alerts and loaders, in the results' family.
   Alerts: a plate with an icon, a title and one sentence; amber for
   something to fix in the form, red for a check that didn't go through.
   Loaders: the site's ring (the dashboard's, in the generic site blue
   and gold, never the faction colors) and a bar with a flowing
   blue-to-gold fill. The button's "Searching..." uses the same ring.
   ============================================ */
.name-search .ns-alert {
    --a: var(--color-warning);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid color-mix(in srgb, var(--a) 32%, rgba(255, 255, 255, 0.06));
    border-radius: 14px;
    background:
        radial-gradient(80% 160% at 0% 0%, color-mix(in srgb, var(--a) 14%, transparent), transparent 60%),
        rgba(5, 9, 16, 0.72);
    animation: ns-rise 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.name-search .ns-alert--error { --a: var(--color-error); }

.name-search .ns-alert__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 22px; /* the title's line, so the two share a middle */
    color: color-mix(in srgb, var(--a) 80%, #fff);
}

.name-search .ns-alert__body { min-width: 0; }

.name-search .ns-alert__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 22px;
    color: var(--color-text);
    /* Measured at 2x: the icon and title ink share a middle, but the title's weight sat
       1px low (mostly lowercase), so it rises 1px to balance on the icon */
    position: relative;
    top: -1px;
}

.name-search .ns-alert__text {
    margin: 4px 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.name-search .ns-alert__text strong { color: var(--color-text); font-weight: 600; }
.name-search .ns-alert .ns-action { margin-top: 12px; height: 36px; }

/* The loader: ring and text on one line, the bar under them */
.name-search .progress-container {
    position: relative;
    margin-top: 20px;
    padding: 18px 20px 20px 56px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background:
        radial-gradient(70% 140% at 0% 0%, rgba(39, 170, 226, 0.08), transparent 60%),
        rgba(5, 9, 16, 0.6);
}

.name-search .progress-container::before,
.name-search .btn .spinner {
    content: "";
    border: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 10%, var(--color-primary) 45%, var(--color-wow-gold) 80%, var(--color-primary) 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: spin 0.9s linear infinite;
}

.name-search .progress-container::before {
    position: absolute;
    left: 20px;
    top: 17px;
    width: 22px;
    height: 22px;
}

.name-search .progress-container .progress-text {
    margin: 0 0 12px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 20px;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.name-search .progress-container .progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.07);
}

.name-search .progress-container .bar-fill {
    background-image: linear-gradient(90deg, #135f86, var(--color-primary), var(--color-wow-gold), #ffe8a3, var(--color-wow-gold), var(--color-primary), #135f86);
    background-size: 200% 100%;
    box-shadow: 0 0 10px rgba(39, 170, 226, 0.55), 0 0 18px rgba(255, 209, 0, 0.25);
    animation: ns-flow 1.6s linear infinite;
}

@keyframes ns-flow {
    from { background-position: 0% 0; }
    to { background-position: -200% 0; }
}

.name-search .btn .spinner {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    margin-right: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .name-search .progress-container .bar-fill,
    .name-search .ns-alert { animation: none; }
}

/* A field's problem (fieldAlert in name-search.js) takes its hint line's place, in red,
   and the field gets the home page's red edge. Editing the field brings the hint back. */
.name-search .ns-form .help.is-error {
    color: #fca5a5;
}

.name-search .ns-form .help.is-error strong {
    color: #fecaca;
    font-weight: 600;
}

.name-search :is(#name, #nameLast, #realm, #realmB, #names)[aria-invalid="true"] {
    border-color: rgba(239, 68, 68, 0.7);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}