/* ==========================================================================
   pbp.css — Play-by-play: simple mode, score attribution, prominent dialog header
   (shared by all dialogs), key play, pull, edit player dialogs.
   Split from main.css (F4); rule order preserved — these files load in
   sequence (see index.html) and must stay in that order.
   Colors come from the token palette in css/tokens.css.
   ========================================================================== */

/* Simple Mode Styles */
.simple-mode-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
}

.large-action-btn {
    width: 80%;
    max-width: 400px;
    padding: 2rem;
    font-size: 2rem;
    border-radius: 1rem;
    background-color: var(--green-bright);
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}


#theyScoreBtn {
    background-color: var(--red-bright);
}


/* Score Attribution Dialog Styles */
.dialog-header {
    position: relative;
    margin-bottom: 0.5rem;
    padding: 0;
}

.dialog-header .close {
    position: absolute;
    right: 0;
    top: 0;
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    color: var(--text-muted);
}

/* Prominent Dialog Header Style - Applied to all dialogs */
.prominent-dialog-header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--brand-orange-soft);
}

.prominent-dialog-header h2 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--brand-orange-soft);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.prominent-dialog-header .close {
    top: 0;
    right: 0;
}


.score-attribution-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.score-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0; /* Allow columns to shrink below content size */
}

.score-column-header {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    text-align: center;
    width: 100%;
}

.player-buttons {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.player-button {
    padding: 0.7rem 0.3rem;
    margin: 0.3rem 0;
    border-radius: 5px;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 2.5rem;
}

/* Modal Styles for Score Attribution */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: var(--white);
    margin: 15% auto;
    padding: 1rem 1rem;
    border: 1px solid var(--text-faint);
    width: 90%;
    max-width: 500px;
    border-radius: 0.5rem;
    position: relative;
}

.callahan-separator {
    width: 100%;
    margin: 0.5rem 0;
    border: 1px solid var(--border-default);
}

/* Score Attribution dialog: keep the whole thing on one screen so the Score
   button never falls below the fold. Scoped to #scoreAttributionDialog so the
   shared .modal-content / .prominent-dialog-header rules are untouched for
   other dialogs. The modal is a height-capped flex column: the player lists
   are the only scroll region, while the modifier flags + action buttons stay
   pinned at the bottom. The big "Score Attribution" title is dropped — the
   Score button plus the fact that you got here by entering a score make it
   redundant — leaving just enough header for the close X. */
#scoreAttributionDialog .modal-content {
    margin: 2vh auto;
    max-height: 96vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#scoreAttributionDialog .prominent-dialog-header {
    margin-bottom: 0.25rem;
    padding-bottom: 0;
    border-bottom: none;
    min-height: 1.5rem;   /* room for the absolutely-positioned close X */
    flex: 0 0 auto;
}
#scoreAttributionDialog .prominent-dialog-header h2 {
    display: none;
}
#scoreAttributionDialog .score-attribution-container {
    flex: 1 1 auto;
    min-height: 0;        /* allow the flex child to shrink below content */
    overflow-y: auto;
}
#scoreAttributionDialog .throw-flags-container,
#scoreAttributionDialog .callahan-separator,
#scoreAttributionDialog .score-attribution-actions {
    flex: 0 0 auto;       /* pinned — never compressed by the scroll area */
}
#scoreAttributionDialog .throw-flags-container {
    margin: 0.5rem 0;
}
#scoreAttributionDialog .score-attribution-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
/* Compact players so the worst case (7-a-side -> 8 buttons incl. Unknown)
   fits without scrolling; the flex:1 scroll area is only a last resort for
   short viewports. */
#scoreAttributionDialog .player-button {
    min-height: 2rem;
    padding: 0.4rem 0.3rem;
    margin: 0.15rem 0;
    font-size: 0.85rem;
}
#scoreAttributionDialog .score-column-header {
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
    line-height: 1.15;
}
/* Two-line column labels: the role word on line 1, a parenthetical clarifier
   on line 2. Three responsive states:
     - default (roomy):        Assist / (Threw Score)
     - horizontal pressure:    Assist / (thrower)      [narrower paren]
     - vertical pressure:      Assist                  [paren dropped]
   See the media queries below for the width/height collapses. */
#scoreAttributionDialog .score-column-header .hdr-main {
    display: block;
}
#scoreAttributionDialog .score-column-header .hdr-paren {
    display: block;
    font-size: 0.78em;
    font-weight: 400;
    color: var(--text-muted);
}
#scoreAttributionDialog .score-column-header .hdr-paren-narrow {
    display: none;   /* default shows the full paren */
}
/* Callahan + "Not a score" share the first row; Score gets its own full-width
   row so it's prominent and hard to misclick. Zero the global button margin
   (button { margin: 10px }) inside the row so the flex `gap` is the only
   spacing — otherwise the stray margins push the two buttons onto separate
   rows. */
#scoreAttributionDialog .score-attribution-actions button {
    margin: 0;
}
#scoreAttributionDialog #scoreConfirmBtn {
    flex: 1 0 100%;
}

/* Horizontal pressure: swap the full paren for a shorter one. Breakpoint sits
   just below the iPhone 15 Pro (393) / Pro Max (430) target so those keep the
   full "(Threw Score)"; narrower phones get "(thrower)". Still two lines. */
@media (max-width: 390px) {
    #scoreAttributionDialog .score-column-header .hdr-paren-full {
        display: none;
    }
    #scoreAttributionDialog .score-column-header .hdr-paren-narrow {
        display: block;
    }
}

/* Vertical pressure: drop the parenthetical entirely → single word, one line.
   Placed AFTER the width query so when both pressures apply, the paren is
   hidden regardless of which variant the width query selected. */
@media (max-height: 760px) {
    #scoreAttributionDialog .score-column-header .hdr-paren {
        display: none;
    }
}

/* The Unknown button carries three labels (full / "Unknown" / "?"); show only
   the full one by default. fitScoreButtons() swaps them in the wide layout via
   the .sa-* container classes. (Base rule — applies in every orientation.) */
#scoreAttributionDialog .player-button .upl-mid,
#scoreAttributionDialog .player-button .upl-min { display: none; }

/* Wide / landscape layout. In landscape (the Field-tab takeover, but any
   landscape opening qualifies) the dialog goes wide and reflows: each player
   COLUMN becomes a horizontal ROW with its "Assist:" / "Goal:" title ABOVE it,
   and the action buttons collapse onto a single row. The player rows never
   wrap — fitScoreButtons() collapses the Unknown label and tightens buttons,
   then the row scrolls horizontally as a last resort. Callahan is hidden when
   inapplicable (offense possession) to reclaim room. */
@media (orientation: landscape) {
    #scoreAttributionDialog .modal-content {
        width: 94vw;
        max-width: 94vw;
        margin: 2vh auto;
        max-height: 96vh;
    }
    /* Stack the two role groups vertically; each group is title-above-row. */
    #scoreAttributionDialog .score-attribution-container {
        flex-direction: column;
        gap: 0.5rem;
    }
    #scoreAttributionDialog .score-column {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.2rem;
    }
    /* Title above its row, left-aligned, with a trailing colon ("Assist:"). */
    #scoreAttributionDialog .score-column-header {
        text-align: left;
        margin: 0;
        font-size: 0.95rem;
    }
    #scoreAttributionDialog .score-column-header .hdr-main::after {
        content: ":";
    }
    /* Single non-wrapping row; scrolls horizontally only after fit stages. */
    #scoreAttributionDialog .player-buttons {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.3rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Buttons grow to fill a roomy row, but never shrink below content (so the
       row overflows — and fitScoreButtons measures that — rather than truncating). */
    #scoreAttributionDialog .player-button {
        flex: 1 0 auto;
        width: auto;
        margin: 0;
        white-space: nowrap;
    }
    /* Collapse stages (cumulative; later rules win for the Unknown label). */
    #scoreAttributionDialog .sa-shrink-unknown .player-button .upl-full { display: none; }
    #scoreAttributionDialog .sa-shrink-unknown .player-button .upl-mid  { display: inline; }
    #scoreAttributionDialog .sa-min-unknown .player-button .upl-full,
    #scoreAttributionDialog .sa-min-unknown .player-button .upl-mid  { display: none; }
    #scoreAttributionDialog .sa-min-unknown .player-button .upl-min  { display: inline; }
    #scoreAttributionDialog .sa-tight .player-button {
        padding: 0.3rem 0.45rem;
        font-size: 0.8rem;
    }
    /* Tighten the modifier strip + drop the separator to save vertical room. */
    #scoreAttributionDialog .throw-flags-container {
        margin: 0.35rem 0;
    }
    #scoreAttributionDialog .callahan-separator {
        display: none;
    }
    /* Actions on one row: Score shares it with "Not a score" (no longer
       forced full-width), and Callahan is gone when inapplicable. */
    #scoreAttributionDialog #scoreConfirmBtn {
        flex: 1 1 auto;
    }
    #scoreAttributionDialog.callahan-inapplicable #callahanBtn {
        display: none;
    }
}

.score-attribution-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.special-action-btn, .secondary-action-btn {
    padding: 0.7rem 1rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 1rem;
    min-width: 80px;
}

/* "Not a score — continue possession": neutral two-line downgrade button.
   Narrower font/line-height so the two text lines sit tidily next to the
   single-line Callahan button it shares a row with. */
#continuePossessionBtn {
    font-size: 0.85rem;
    line-height: 1.15;
}

/* Throw modifiers are tight toggle pills (not checkboxes) — no checkbox box to
   eat horizontal space, so all five fit on one row with room to spare; the
   selected state is the app's standard blue (button.selected). flex-wrap
   spills to a second row only if they genuinely can't fit. */
.throw-flags-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 0.5rem;
    margin: 1rem 0;
    padding: 0.5rem;
    border-top: 1px solid var(--border-lighter);
    border-bottom: 1px solid var(--border-lighter);
}

.throw-flag-btn {
    margin: 0;                 /* override global button { margin: 10px } */
    flex: 0 0 auto;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: var(--surface-light);
    color: var(--gray-dark);
    font-size: 0.85rem;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

/* button.selected (global) already supplies the blue fill + white text; just
   match the border so the pill reads as a solid chip when active. */
.throw-flag-btn.selected {
    border-color: var(--color-primary);
    font-weight: 600;
}

/* Responsive: tighten on phone widths so the five pills keep to one row down
   to the iPhone 15 Pro's 393px width. */
@media (max-width: 480px) {
    .throw-flags-container {
        gap: 0.3rem 0.25rem;
        padding: 0.5rem 0.25rem;
    }

    .throw-flag-btn {
        font-size: 0.8rem;
        padding: 0.28rem 0.4rem;
    }
}

/* Responsive adjustments for very small screens */
@media (max-width: 360px) {
    .modal-content {
        padding: 0.5rem;
        width: 95%;
    }
    
    .player-button {
        padding: 0.5rem 0.2rem;
        font-size: 0.8rem;
        min-height: 2rem;
    }
    
    .special-action-btn, .secondary-action-btn {
        padding: 0.5rem;
        font-size: 0.9rem;
        min-width: 70px;
    }
    
    .score-attribution-container {
        gap: 0.5rem;
    }
    
    .score-column-header {
        font-size: 1rem;
    }
}

/* Key Play Dialog Styles */
.key-play-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.key-play-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0; /* Allow columns to shrink below content size */
}

.key-play-header {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    text-align: center;
    width: 100%;
    cursor: pointer;
    transition: color 0.3s;
}


.key-play-panels {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1rem;
}

.key-play-panel {
    border: 3px solid var(--black);
    border-radius: 0.5rem;
    background-color: var(--surface-subtle);
    overflow: visible;
    position: relative;
    margin-top: 1rem;
}

.key-play-panel-header {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    padding: 0 0.75rem;
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--black);
    z-index: 1;
}

.key-play-sub-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.1rem 0.2rem;
    padding: 0.6rem 0.3rem 0.3rem 0.3rem;
    transition: height 0.15s ease-out, opacity 0.1s ease-out;
    overflow: hidden;
}

.key-play-sub-btn {
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--black);
    border-radius: 0.25rem;
    background-color: var(--surface-subtle);
    color: var(--black);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    min-height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px; /* class beats the global button { margin: 10px } on specificity */
    position: relative;
    z-index: 2;
}

.key-play-sub-btn.full-width {
    grid-column: 1 / -1;
}


.key-play-sub-btn.selected {
    background-color: var(--blue-action);
    color: white;
    border-color: var(--blue-action);
}

/* Responsive adjustments for Key Play dialog */
@media (max-width: 600px) {
    .modal-content {
        width: 95%;
        margin: 10% auto;
    }
}

@media (max-width: 480px) {
    .key-play-container {
        gap: 0.5rem;
    }
    
    .key-play-header {
        font-size: 1rem;
    }
    
    .key-play-panels {
        gap: 0.5rem;
    }
    
    .key-play-panel-header {
        font-size: 1rem;
        padding: 0 0.5rem;
    }
    
    .key-play-sub-buttons {
        padding: 0.5rem 0.3rem 0.3rem 0.3rem;
        gap: 0.1rem 0.15rem;
    }
    
    .key-play-sub-btn {
        padding: 0.2rem 0.4rem;
        font-size: 0.8rem;
        min-height: 1.6rem;
        margin: 1px;
    }
}

@media (max-width: 360px) {
    .key-play-sub-buttons {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
    
    .key-play-sub-btn {
        padding: 0.15rem 0.3rem;
        font-size: 0.75rem;
        min-height: 1.4rem;
        margin: 1px;
    }
}

/* Pull Dialog Styles - Uses prominent-dialog-header class */

.pull-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
    margin: 1rem 0;
}

.pull-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.pull-quality-buttons {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
}

.pull-quality-btn {
    padding: 0.7rem;
    border: 2px solid var(--black);
    border-radius: 0.5rem;
    background-color: var(--surface-subtle);
    color: var(--black);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.pull-quality-btn:hover {
    background-color: var(--surface-hover);
}

.pull-quality-btn.selected {
    background-color: var(--blue-action);
    color: white;
    border-color: var(--blue-action);
}

.pull-checkboxes {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.pull-checkboxes label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
}

.pull-checkboxes input[type="checkbox"] {
    margin-right: 0.4rem;
    cursor: pointer;
}

/* Optional hang-time stopwatch — same amber chip look as Field mode's
   pull-hang button (fieldPbp.css .fp-ebtn.pullhang), on warning-family
   tokens. Monospace keeps the ticking digits from jittering the width. */
.pull-hang-row {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0;
}

.pull-hang-btn {
    margin: 0;
    padding: 0.5rem 1.2rem;
    border: 1px solid var(--color-warning);
    border-radius: 0.5rem;
    background: var(--color-warning-surface);
    color: var(--color-warning-text);
    font: 700 13px 'JetBrains Mono', monospace;
    cursor: pointer;
}

.pull-hang-btn.running {
    background: var(--color-warning);
}

.pull-dialog-buttons {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.pull-proceed-btn {
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 0.5rem;
    background-color: var(--color-success);
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.pull-proceed-btn:hover:not(:disabled) {
    background-color: var(--color-success-hover);
}

.pull-proceed-btn:disabled {
    background-color: var(--color-secondary);
    cursor: not-allowed;
}

.pull-proceed-btn.warning {
    background-color: var(--orange-alert);
}

.pull-proceed-btn.warning:hover {
    background-color: var(--orange-alert-hover);
}

#pullGenderSelection {
    margin: 1rem 0;
    text-align: center;
}

#pullGenderSelection label {
    margin: 0 0.5rem;
    cursor: pointer;
}

#pullGenderSelection input[type="radio"] {
    margin-right: 0.3rem;
    cursor: pointer;
}

.player-button.ineligible-puller {
    background-color: var(--text-disabled); /* Medium grey - different from eligible players but not as light as disabled */
    opacity: 1;
}

/* Selected ineligible player button - show selected style with warning orange */
.player-button.selected.ineligible-puller {
    /* triple-class specificity already beats button.selected and
       .player-button.ineligible-puller — no !important needed */
    background-color: var(--orange-alert); /* Full warning orange - matches Proceed button warning style */
    opacity: 1; /* Full opacity for selected style */
    border: 2px solid var(--color-primary); /* Add blue border to show selected state */
    color: var(--white); /* White text for contrast on orange background */
}

/* Edit Player Dialog Styles */
.edit-player-modal-content {
    max-width: 400px;
    width: 90%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.edit-player-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 1.5rem 0;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.edit-player-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.edit-player-field label {
    font-weight: bold;
    font-size: 1rem;
}

.edit-player-gender-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.edit-player-gender-field label {
    margin: 0;
    min-width: fit-content;
}

.edit-player-input {
    padding: 0.7rem;
    border: 2px solid var(--border-default);
    border-radius: 0.5rem;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.edit-player-input:focus {
    outline: none;
    border-color: var(--brand-orange-soft);
}

.edit-player-gender-field .gender-button {
    width: 80px;
    height: 40px;
    padding: 4px 8px;
    font-size: 1em;
    font-weight: bold;
    border: 2px solid;
    border-radius: 0.5rem;
    transition: all 0.2s;
    cursor: pointer;
    flex-shrink: 0;
}

.edit-player-gender-field .gender-button.fmp-button {
    background-color: var(--gender-fmp-surface);
    color: var(--gender-fmp);
    border-color: var(--gender-fmp);
}

.edit-player-gender-field .gender-button.fmp-button.selected {
    background-color: var(--gender-fmp);
    color: white;
    border-color: var(--gender-fmp);
}

.edit-player-gender-field .gender-button.mmp-button {
    background-color: var(--gender-mmp-surface);
    color: var(--gender-mmp);
    border-color: var(--gender-mmp);
}

.edit-player-gender-field .gender-button.mmp-button.selected {
    background-color: var(--gender-mmp);
    color: white;
    border-color: var(--gender-mmp);
}

.edit-player-dialog-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-lighter);
}

.edit-player-dialog-buttons-right {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.edit-player-cancel-btn,
.edit-player-confirm-btn,
.edit-player-delete-btn {
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    flex: 0 0 auto;
    min-width: 0;
    box-sizing: border-box;
}

.edit-player-delete-btn {
    width: 100%;
}

.edit-player-dialog-buttons-right .edit-player-cancel-btn,
.edit-player-dialog-buttons-right .edit-player-confirm-btn {
    flex: 1 1 auto;
    min-width: 100px;
    max-width: calc(50% - 0.5rem);
}

.edit-player-cancel-btn {
    background-color: var(--color-secondary);
    color: white;
}

.edit-player-confirm-btn {
    background-color: var(--color-success);
    color: white;
}

.edit-player-confirm-btn:disabled {
    background-color: var(--color-secondary);
    cursor: not-allowed;
    opacity: 0.6;
}

.edit-player-delete-btn {
    background-color: var(--color-danger);
    color: white;
}

/* Make roster name cells clickable */
.roster-name-column {
    cursor: pointer;
    user-select: none;
}

@media (max-width: 480px) {
    .pull-container {
        gap: 0.5rem;
    }
    
    .prominent-dialog-header h2 {
        font-size: 1.5rem;
    }
    
    .pull-quality-btn {
        padding: 0.5rem;
        font-size: 0.9rem;
    }
    
    .pull-checkboxes {
        gap: 0.5rem;
    }
}


/* Defensive set picker row in the pull dialog (set tracking opt-in) */
.pull-set-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.pull-set-row select {
    flex: 0 1 auto;
    padding: 6px 8px;
    font-size: 0.95em;
}