/* Shared app hamburger menu (spec 024) — used by base.html and the live-logging shell.
   Uses theme vars (--dropdown-bg, --hamburger-line-color, etc.) defined by the host page
   (theme.css in the app; the live shell defines them in its own <style>). */
.hamburger-menu {
    position: relative;
}

.hamburger-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 32px;
    height: 32px;
}

.hamburger-line {
    width: 24px;
    height: 4px;
    background-color: var(--hamburger-line-color);
    margin: 0;
    transition: 0.3s;
    align-self: center;
}

.hamburger-dropdown {
    position: absolute;
    top: 100%;
    right: -16px;
    background-color: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    border-radius: 4px;
    box-shadow: 0 4px 12px var(--dropdown-shadow);
    min-width: 160px;
    z-index: 2010;
    display: none;
}

.hamburger-dropdown.show {
    display: block;
}

/* The :visited half is load-bearing, not belt-and-braces. theme.css carries
   `a:visited { color: var(--link-color) }` so that a visited link does not go the
   browser's purple — and at (0,1,1) that out-specifies a bare `.hamburger-item`
   (0,1,0). The effect: every destination you had actually been to turned accent
   green, one at a time as you used the app, while Share stayed white because
   href="#" never counts as visited. It read as "Share is the odd one out" rather
   than "six items are wrong", which is why it took a screenshot of a browser with
   real history to see. A fresh automation profile has none, so it never reproduced.

   Anything here that sets a colour needs its own :visited, or it has to beat
   (0,1,1) on its own. */
.hamburger-item,
.hamburger-item:visited {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

.hamburger-item:last-child {
    border-bottom: none;
}

.hamburger-item:hover {
    background-color: var(--hover-bg);
    text-decoration: none;
    color: var(--text-color);
}

.hamburger-item.disabled {
    color: var(--disabled-text);
    cursor: not-allowed;
}

.hamburger-item.disabled:hover {
    background-color: transparent;
}

/* The menu is two groups: where you can go, then what you can do from here. The
   break is a gap, not a second line — every item already draws a hairline under
   itself, so a heavier rule on top of one just reads as a smudge. */
.hamburger-group-break {
    margin-top: 5px;
}

/* Log Out is the one item that undoes something, and the last one you can act on.
   Same treatment as the Account row it mirrors on /me. The fallback matters: the
   live-logging shell scopes its own vars onto .live-menu and does not define this
   one. */
.hamburger-item-out,
.hamburger-item-out:visited,
.hamburger-item-out:hover {
    color: var(--danger, #e85a5a);
}

/* Not an item — it is the line /me ends on, and nothing happens if you click it. */
.hamburger-who {
    margin: 0;
    padding: 10px 16px;
    font-size: 0.8rem;
    color: var(--secondary-text, #9a9aa3);
}

/* 'Find a tune' sheet BODY (app-wide; opens the tune-detail modal on a result).
   The overlay chrome (#find-tune-overlay/.ft-scrim/.ft-panel/.ft-head/.ft-close)
   is the kit Sheet's now — only the body content classes remain.
   Fallback matters: the live-logging shell loads this file without theme.css
   (the live shell's app.css scopes the dark vars onto .kit-sheet). */
.ft-search-wrap { margin: 0 0 10px; }
.ft-input {
    padding: 10px 12px; font: inherit; width: 100%; box-sizing: border-box;
    background: var(--bg-color, #0e0e10); color: var(--text-color, #ececef);
    border: 1px solid var(--border-color, #2a2a30); border-radius: 8px;
}
.ft-results { list-style: none; margin: 0; padding: 0; }
.ft-item {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 10px 12px; border-radius: 8px; cursor: pointer;
}
.ft-item:hover { background: var(--hover-bg, rgba(255,255,255,0.06)); }
.ft-type { color: var(--disabled-text, #9a9aa3); font-size: 13px; flex: none; }
/* This row matched the NOTATION, not the name — otherwise a search for notes returns
   a list of names with no visible reason for being there. */
.ft-abc { color: #e8d28a; font-size: 13px; flex: none; margin-left: 6px; margin-right: auto; }
.ft-empty { padding: 10px 12px; color: var(--disabled-text, #9a9aa3); font-style: italic; }
/* Pasted-link states: the "looking up #NNN" note and the import/offsite handoff the
   empty state offers when the catalog doesn't have that tune yet. */
.ft-note { padding: 4px 12px 0; margin: 0; color: var(--disabled-text, #9a9aa3); font-size: 13px; }
.ft-import { display: block; margin-top: 4px; color: var(--primary, #4a9eff); font-style: normal; }