.tt-app-dropdown {
    background-color: var(--bg-color);
    border: var(--border-thin) solid var(--border-muted);
    border-radius: var(--default-border-radius);
    min-width: 220px;
    padding: var(--space-2xs) 0 var(--space-2xs);
    box-shadow: var(--shadow-dropdown);
    overflow: hidden;
}
.tt-app-dropdown-header {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-s);
}
.tt-app-dropdown-header strong {
    font-size: var(--step--1);
    display: block;
    color: var(--heading-color);
}
.tt-app-dropdown .dropdown-item {
    color: var(--paragraph-color);
    background-color: transparent;
    border-left: var(--border-md) solid transparent;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.tt-app-dropdown .dropdown-item-text {
    white-space: nowrap;
}
.tt-app-dropdown .dropdown-item:hover,
.tt-app-dropdown .dropdown-item:focus {
    color: var(--heading-color);
    background-color: var(--bg-muted);
    border-left-color: var(--primary-color);
}
.tt-app-dropdown .dropdown-divider {
    border-color: var(--border-muted);
}
/* A group label names the rows under it, the way the sidebar's section labels
   name theirs - so it is set the same way, and sized off the menu's own text
   rather than at a --step-* token, which is absolute and would land above the
   rows it is labelling. */
.tt-app-dropdown .dropdown-header {
    font-size: calc(1em / var(--type-ratio));
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding-bottom: var(--space-3xs);
}

/* Report format menu: favorites on top, the rest behind a "more" toggle. */
.tt-report-formats {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tt-report-format {
    display: flex;
    align-items: stretch;
}
.tt-report-format[hidden] {
    display: none;
}
.tt-report-format .dropdown-item {
    flex: 1 1 auto;
    min-width: 0;
}
.tt-report-format:hover .dropdown-item {
    color: var(--heading-color);
    background-color: var(--bg-muted);
    border-left-color: var(--primary-color);
}
/* The star is a quiet affordance — it must not out-shout the format it labels. */
.tt-report-format-star {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 var(--space-s);
    border: 0;
    background-color: transparent;
    color: var(--text-muted);
    opacity: 0.4;
    cursor: pointer;
    transition: color 0.15s, opacity 0.15s, background-color 0.15s;
}
.tt-report-format:hover .tt-report-format-star {
    background-color: var(--bg-muted);
    opacity: 1;
}
.tt-report-format-star:hover,
.tt-report-format-star:focus-visible {
    opacity: 1;
}
.tt-report-format-star[aria-pressed="true"] {
    opacity: 1;
}
.tt-report-format-star:disabled {
    cursor: progress;
    opacity: 0.4;
}
/* The hint and the count are notes about the rows, so they read one step below
   the rows — relative to the menu's own text rather than at a --step-* token,
   which is absolute and lands at 19px against 16px rows: a note louder than the
   thing it annotates. */
.tt-report-formats-hint .dropdown-item-text {
    display: block;
    padding: var(--space-2xs) var(--space-s);
    color: var(--text-muted);
    font-size: calc(1em / var(--type-ratio));
    white-space: normal;
}
.tt-report-formats-more .tt-icon {
    width: 0.9em;
    height: 0.9em;
    margin: 0;
}
.tt-report-formats-more {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    width: 100%;
    border: 0;
    background-color: transparent;
    font-size: calc(1em / var(--type-ratio));
    color: var(--text-muted);
    cursor: pointer;
}
/* The glyph follows aria-expanded the way the star follows aria-pressed: both
   are in the markup and CSS picks, so the button's state is written once and a
   toggle can never leave the label saying "Show less" under a chevron that
   still offers to open. */
.tt-report-formats-more :is(.tt-expand-icon, .tt-collapse-icon) {
    display: inline-flex;
    flex: 0 0 auto;
}
.tt-report-formats-more .tt-collapse-icon,
.tt-report-formats-more[aria-expanded="true"] .tt-expand-icon {
    display: none;
}
.tt-report-formats-more[aria-expanded="true"] .tt-collapse-icon {
    display: inline-flex;
}
.tt-report-formats-more:hover,
.tt-report-formats-more:focus-visible {
    color: var(--heading-color);
    background-color: var(--bg-muted);
}