/* ================================================================
   GDDropdown — custom alphabetic dropdown with jump rail
   Companion to gd-dropdown.js

   All custom properties are prefixed --gd- and have standalone
   defaults below. Override them in your page or theme CSS to
   integrate with your design system.
   ================================================================ */

:root {
    --gd-color-text:              #222;
    --gd-color-border:            #bbb;
    --gd-color-placeholder:       #888;
    --gd-color-trigger-bg:        #fff;
    --gd-color-trigger-border:    #ccc;
    --gd-color-panel-bg:          #fff;
    --gd-color-panel-shadow:      rgba(0,0,0,0.22);
    --gd-color-item-hover:        #eae6f5;
    --gd-color-item-selected-bg:  #1434A4;
    --gd-color-item-selected-fg:  white;
    --gd-color-item-blank-fg:     #999;
    --gd-color-rail-bg:           #f0ede7;
    --gd-color-rail-btn-bg:       #e8e4de;
    --gd-color-rail-btn-border:   #aaa;
    --gd-color-rail-btn-active:   #1434A4;
    --gd-color-rail-btn-act-fg:   white;
    --gd-color-backdrop:          rgba(0,0,0,0.4);
    --gd-color-focus:             #1434A4;
    --gd-radius-trigger:          5px;
    --gd-radius-panel:            11px;
}

/* ── container ──────────────────────────────────────────────── */

.gd-dropdown {
    min-width: 0;
}

/* ── trigger button ─────────────────────────────────────────── */

.gd-trigger {
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    width:              100%;
    min-width:          0;
    gap:                0.35em;
    padding:            0.28em 0.5em 0.28em 0.6em;
    font:               inherit;
    line-height:        1;
    -webkit-appearance: none;
    appearance:         none;
    background:         var(--gd-color-trigger-bg);
    color:              var(--gd-color-text);
    border:             1px solid var(--gd-color-trigger-border);
    border-radius:      var(--gd-radius-trigger);
    cursor:             pointer;
    text-align:         left;
}

.gd-trigger:focus-visible {
    outline:        2px solid var(--gd-color-focus);
    outline-offset: 1px;
}

.gd-trigger-text {
    flex:          1;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    min-width:     0;
}

.gd-trigger-text.is-placeholder { color: var(--gd-color-placeholder); }

.gd-trigger-arrow {
    flex-shrink:      0;
    color:            inherit;
    font-size:        1em;
    transform:        scale(1.5);
    transform-origin: center;
    transition:       transform 0.15s;
}

.gd-trigger.open .gd-trigger-arrow { transform: rotate(180deg) scale(1.5); }

/* ── panel ──────────────────────────────────────────────────── */

.gd-panel {
    display:        none;
    flex-direction: row;
    background:     var(--gd-color-panel-bg);
    color:          var(--gd-color-text); /* set here so items inherit it, not body */
    border:         1px solid var(--gd-color-border);
    border-radius:  var(--gd-radius-panel);
    overflow:       hidden;
    z-index:        9100;
}

.gd-panel.is-open  { display: flex; }

.gd-panel.is-float {
    position:   fixed;
    box-shadow: 0 6px 28px var(--gd-color-panel-shadow);
}

.gd-panel.is-modal {
    /* width set inline by JS to match float mode */
    position:   fixed;
    height:     78vh;
    top:        50%;
    left:       50%;
    transform:  translate(-50%, -50%);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

/* ── list column (blank row + scrollable list) ──────────────── */

.gd-list-column {
    display:        flex;
    flex-direction: column;
    flex:           1;
    min-width:      0;
    min-height:     0;
    overflow:       hidden;
}

/* ── blank / deselect row ───────────────────────────────────── */

.gd-blank-row {
    flex-shrink:    0;
    padding:        0.45em 0.75em;
    color:          var(--gd-color-item-blank-fg);
    font-style:     italic;
    border-bottom:  1px solid var(--gd-color-border);
    background:     var(--gd-color-rail-bg);
    box-shadow:     0 3px 6px -1px var(--gd-color-panel-shadow);
    cursor:         pointer;
    user-select:    none;
}

.gd-blank-row:hover      { background: var(--gd-color-item-hover); }
.gd-blank-row.is-selected { background: var(--gd-color-rail-bg); }

/* ── scrollable list ────────────────────────────────────────── */

.gd-list-wrap {
    flex:                1;
    overflow-y:          auto;
    min-width:           0;
    min-height:          0;      /* let flex shrink below content height */
    overscroll-behavior: contain;
    scrollbar-width:     thin;
}

.gd-list-wrap::-webkit-scrollbar       { width: 5px; }
.gd-list-wrap::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

.gd-item {
    padding:     0.12em 0.75em;
    cursor:      pointer;
    line-height: 1.1;
    user-select: none;
}

.gd-item:hover       { background: var(--gd-color-item-hover); }
.gd-item.is-selected { background: var(--gd-color-item-selected-bg);
                        color:      var(--gd-color-item-selected-fg); }


.gd-filler { pointer-events: none; cursor: default; }

/* ── letter rail — 52px wide; button heights set by JS ─────── */

.gd-rail {
    flex-shrink:    0;
    width:          52px;
    display:        flex;
    flex-direction: column;
    gap:            2px;   /* GAP — must match JS _sizeRail constant */
    padding:        4px;   /* PAD/2 each side — must match JS _sizeRail constant */
    border-left:    1px solid var(--gd-color-border);
    background:     var(--gd-color-rail-bg);
    overflow:       hidden;
}

.gd-rail-btn {
    flex:          none;
    width:         100%;
    border:        1px solid var(--gd-color-rail-btn-border);
    border-radius: 4px;
    font-family:   inherit;
    font-size:     0.7em;
    font-weight:   bold;
    line-height:   1;
    cursor:        pointer;
    background:    var(--gd-color-rail-btn-bg);
    color:         var(--gd-color-text);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    padding:       0 2px;
    transition:    background 0.08s, color 0.08s;
}

.gd-rail-btn:hover:not(.is-active) {
    background: color-mix(in srgb, var(--gd-color-rail-btn-active) 18%, var(--gd-color-rail-btn-bg));
}

.gd-rail-btn.is-active {
    background:   var(--gd-color-rail-btn-active);
    color:        var(--gd-color-rail-btn-act-fg);
    border-color: transparent;
}

/* ── backdrop for modal mode ────────────────────────────────── */

.gd-backdrop {
    display:    none;
    position:   fixed;
    inset:      0;
    background: var(--gd-color-backdrop);
    z-index:    9050;
}

.gd-backdrop.is-open { display: block; }