/* Progress toggle pairs: minimal controls with underlined selections.
 * Quote: keep the first non-navigable quote centered in the exact same
 * middle column as later quotes with left/right arrows.
 */
#rank-tab .rank-content > #rankQuoteHost {
    grid-template-columns: 30px minmax(0,1fr) 30px !important;
    column-gap: 4px !important;
    justify-items: stretch !important;
    align-items: center !important;
}
#rank-tab #rankQuoteHost > .rank-quote-content {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: center !important;
    justify-self: stretch !important;
}
#rank-tab #rankQuoteHost > #rankQuotePrev {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
}
#rank-tab #rankQuoteHost > #rankQuoteNext {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: center !important;
}
#rank-tab #rankQuoteHost > #rankQuotePrev[hidden],
#rank-tab #rankQuoteHost > #rankQuoteNext[hidden] {
    display: none !important;
}
#rank-tab #rankQuoteHost .rank-quote-kind,
#rank-tab #rankQuoteHost .rank-quote-text,
#rank-tab #rankQuoteHost .rank-quote-credit {
    text-align: center !important;
    justify-self: center !important;
    width: 100% !important;
}

/* Forecast title and all related choices share one row; the status
   gets a separate unobtrusive full-width line below it. */
#graph-tab .goal-forecast-heading {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 3px 8px !important;
    flex-wrap: nowrap !important;
    justify-content: normal !important;
}
#graph-tab .goal-forecast-heading > div:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
}
#graph-tab .goal-forecast-heading > .goal-heading-right {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
}
#graph-tab .goal-forecast-heading > #goalForecastStatus {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    text-align: right !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
}
#graph-tab #etaEntryControls {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}
#graph-tab .progress-choice-group,
#graph-tab .progress-forecast-options {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
}
#graph-tab .progress-choice-group[hidden] {
    display: none !important;
}
#graph-tab .progress-choice-group > :is(button,.eta-entry-btn),
#graph-tab #etaEntryControls .eta-entry-btn {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    flex: 1 0 auto !important;
    width: auto !important;
    min-width: 32px !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 6px 8px !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(172,192,219,.18) !important;
    border-bottom: 2px solid rgba(172,192,219,.18) !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: var(--theme-text-muted,#B8C5D6) !important;
    -webkit-text-fill-color: var(--theme-text-muted,#B8C5D6) !important;
    text-align: center !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
}
/* Selection is ONLY an accent underline. Do not recolor button surfaces. */
#graph-tab .progress-choice-group > button:is(.active,[aria-pressed="true"]),
#graph-tab #etaEntryControls button.eta-entry-btn:is(.active,[aria-pressed="true"]) {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 1px solid rgba(172,192,219,.18) !important;
    border-bottom: 2px solid var(--theme-primary,#00D4FF) !important;
    border-radius: 0 !important;
    color: var(--theme-text,#fff) !important;
    -webkit-text-fill-color: var(--theme-text,#fff) !important;
    box-shadow: none !important;
}
#graph-tab .progress-choice-group > button:focus-visible,
#graph-tab #etaEntryControls button.eta-entry-btn:focus-visible {
    outline: 2px solid var(--theme-primary,#00D4FF) !important;
    outline-offset: 2px !important;
}
#graph-tab .progress-choice-group > button:active,
#graph-tab #etaEntryControls button.eta-entry-btn:active {
    transform: scale(.96) !important;
}

/* Graph ranges use the same clean text and fine accent underline. */
#graph-tab .chart-toolbar .range-option .range-btn {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 6px 2px !important;
}
#graph-tab .chart-toolbar .range-option input:checked + .range-btn {
    border: 0 !important;
    border-bottom: 2px solid var(--theme-primary,#00D4FF) !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--theme-text,#fff) !important;
    -webkit-text-fill-color: var(--theme-text,#fff) !important;
}

/* Two clear option groups below the Weight History header and above its
   data; never squeeze four labels into the title line on mobile. */
#graph-tab .history-section > .history-heading-row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: auto auto !important;
    row-gap: 8px !important;
}
#graph-tab .history-section > .history-heading-row > h3 {
    grid-column: 1 !important;
    grid-row: 1 !important;
}
#graph-tab .history-heading-actions {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    align-items: start !important;
    justify-items: stretch !important;
    column-gap: 12px !important;
    row-gap: 10px !important;
    margin: 0 !important;
    width: 100% !important;
}
#graph-tab .history-heading-actions > .progress-choice-group {
    min-width: 0 !important;
    width: 100% !important;
}
#graph-tab .history-heading-actions > .progress-choice-group > button {
    flex: 1 1 50% !important;
}
#graph-tab .history-heading-actions > .history-total-change {
    grid-column: 1 / -1 !important;
    justify-self: end !important;
    flex: none !important;
    margin: 0 !important;
}
#graph-tab .history-heading-actions > .history-period-options[hidden] {
    display: none !important;
}
#graph-tab .history-heading-actions:has(.history-period-options[hidden]) > .history-view-options {
    grid-column: 1 / -1 !important;
    justify-self: end !important;
    width: min(100%,210px) !important;
}
@media (max-width: 400px) {
    #graph-tab .goal-forecast-heading h3 { font-size: 14px !important; }
    #graph-tab #etaEntryControls { gap: 4px !important; }
    #graph-tab .progress-choice-group,
    #graph-tab .progress-forecast-options { gap: 3px !important; }
    #graph-tab #etaEntryControls .progress-choice-group > button,
    #graph-tab #etaEntryControls .eta-entry-btn {
        min-height: 34px !important;
        height: 34px !important;
        min-width: 29px !important;
        padding: 4px 5px !important;
        font-size: 9px !important;
    }
    #rank-tab .rank-content > #rankQuoteHost {
        grid-template-columns: 24px minmax(0,1fr) 24px !important;
    }
}


/* Restore chart height lost in the recent mobile compaction. Chart.js uses
   maintainAspectRatio:false and fills this flex canvas automatically. */
#graph-tab .chart-wrapper {
    height: 356px !important;
    min-height: 356px !important;
    max-height: none !important;
}
#graph-tab .chart-wrapper .chart-canvas-area {
    flex: 1 1 auto !important;
    min-height: 258px !important;
}
@media (max-width: 440px) {
    #graph-tab .chart-wrapper {
        height: 330px !important;
        min-height: 330px !important;
    }
    #graph-tab .chart-wrapper .chart-canvas-area {
        min-height: 240px !important;
    }
}