/* The saved-lists selector.
 *
 * Lives inside #dice-roller-header, sharing that row with the save and sound
 * toggles. #expand-all is absolutely positioned off to the left, so everything
 * after those toggles is free space and this fills it.
 *
 * Sized to belong to the roller rather than sit above it: same height as the
 * controls beside it, no border of its own, no panel. Colours are themes.css
 * custom properties, so it follows the colour schemes and day/night mode. */

/* ── the header row as a grid ────────────────────────────────────────
   Column for column with the dice line below: the list box sits over
   .d-line (192px), the sound toggle over .line-result (58px), and the list
   buttons over .roll (54px). space-between then reproduces the same two
   17px gaps the line and footer rows already use, without hard-coding them. */
#dice-roller-header {
    justify-content: space-between;
}

#dice-list-bar {
    position: relative;      /* anchor for the transient status overlay */
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 180px;
    max-width: 192px;
    width: 192px;
}

/* Constrained to the .line-result column width. The wrapper's own sizing is a
   content-box 32px plus a 24px left pad (a text-indent trick that positions the
   checkbox and the speaker glyph), which measures 86px and would overhang the
   result box below it. */
#dice-roller-header .checkbox-wrapper {
    box-sizing: border-box;
    flex: 0 0 58px;
    width: 58px;
    height: 30px;
    padding-top: 4px;
    padding-left: 22px;
    margin-left: 0;
}

#dice-list-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex: 0 0 54px;
}

/* The list box. Deliberately the same width, border and corner radius as
   .d-line directly below it, so the two read as one column rather than as a
   toolbar sitting on top of a list. */
.dl-name,
.dl-signin {
    box-sizing: border-box;
    width: 100%;
    height: 30px;
    border: var(--theme-primary, #cc0000) solid 2px;
    border-radius: 15px;
    background-color: var(--bg-button, #efefde);
}

.dl-name {
    min-width: 0;
    padding: 0 12px;
    font-size: 0.82em;
    color: var(--text-primary, #000);
    text-align: center;
}

/* Signed out this is the same box, carrying the one thing worth saying in it.
   Same box signed in or out, so signing in fills it rather than replacing it. */
.dl-signin {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--text-primary, #000);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
}

.dl-signin b {
    font-weight: 700;
    color: var(--theme-primary, #cc0000);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-right: 4px;
}

.dl-signin:hover {
    background-color: var(--bg-secondary, #ffffff);
}

.dl-btn {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 24px;
    height: 28px;
    padding: 0;
    line-height: 1;
    font-size: 0.95em;
    font-weight: 700;
    border: var(--theme-primary, #cc0000) solid 2px;
    /* Rounded like everything else in the roller. At 4px they were the only
       square-cornered thing on the page and read as borrowed from elsewhere. */
    border-radius: 12px;
    background-color: var(--bg-button, #efefde);
    color: var(--text-primary, #000);
    cursor: pointer;
}

.dl-btn:hover { background-color: var(--bg-secondary, #ffffff); }

/* Delete keeps the row's red border so the group stays coherent; it is the
   muted glyph, not a grey box, that marks it as the secondary action. A grey
   border here read as disabled. */
.dl-btn.dl-danger {
    color: var(--text-secondary, #666);
    font-weight: 400;
}

/* `hidden` must win over the display rules above. */
#dice-list-bar [hidden],
#dice-list-actions [hidden] {
    display: none !important;
}

/* Transient only: "Saving…", "Renamed", an error. Laid over the list box
   rather than given a column of its own, because the row has no spare width
   and covering the name for a moment is self-explanatory. :empty keeps it out
   of the way the rest of the time. */
.dl-status {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    padding: 0 8px;
    font-size: 0.74em;
    color: var(--text-secondary, #666);
    background-color: var(--bg-button, #efefde);
    border: var(--theme-primary, #cc0000) solid 2px;
    border-radius: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dl-status:empty {
    display: none;
}

.dl-status.dl-error {
    color: var(--theme-primary, #cc0000);
    font-weight: 700;
}

/* On a phone the row is tight, so the transient status drops out rather than
   squeezing the name box. */
/* The row is narrower on a phone but the columns still track the dice line,
   so nothing needs repositioning. The status overlay stays: it is the only
   feedback that a save happened. */
@media screen and (max-width: 640px) {
    .dl-name { font-size: 0.78em; padding: 0 8px; }
}