.hidden { display: none !important; }
.invert-text { color: var(--bg); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 0.95em;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid var(--border);
    background-color: var(--bg2); 
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative; /* REQUIRED for the tooltip anchor */
}

/* Button Color Modifiers (Defines the theme for the specific button) */
.btn-purple { --btn-color: var(--purple); }
.btn-green  { --btn-color: var(--green); }
.btn-blue   { --btn-color: var(--blue); }
.btn-orange { --btn-color: var(--orange); }
.btn-gray   { --btn-color: var(--gray); }
.btn-red    { --btn-color: var(--red); }

/* Inactive Icon: Uses the assigned color, or falls back to text color */
.btn .material-symbols-outlined {
    color: var(--btn-color, var(--text));
    transition: color 0.2s ease;
}

/* Hover State (Optional: slight background shift) */
.btn:hover { 
    background-color: var(--bg3, #333); 
}

/* Active State: Background becomes the color, text becomes the background */
.btn.active {
    background-color: var(--btn-color, var(--text));
    border-color: var(--btn-color, var(--border));
    color: var(--bg);
}

/* Active Icon: Matches the new text color */
.btn.active .material-symbols-outlined {
    color: var(--bg);
}

.btn-static {
    /* Mimics opacity: 0.3 strictly on the background and border */
    background-color: color-mix(in srgb, var(--bg2) 30%, transparent);
    border-color: color-mix(in srgb, var(--border) 30%, transparent);
    
    /* Text remains 100% bright */
    color: var(--text);
    pointer-events: none;
}

/* =========================================
   SEGMENTED CONTROL (Button Groups)
   ========================================= */
/* Add this so you can delete .segment-btn from home.css */
.btn-group {
    display: flex;
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--border);
    overflow: hidden;
    background: var(--bg2);
}

.btn-group .btn {
    flex: 1;
    border: none;
    border-right: 1px solid var(--border);
    border-radius: 0; /* Removes individual rounded corners */
}

.btn-group .btn:last-child {
    border-right: none;
}


/* =========================================
   MULTI-BUTTON STACKS (Generic layout for any 2-row button cluster)
   ========================================= */
#display {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

.multi-btn {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 130px; 
	
	/* NEW: Container border and spacing */
    border: 1px solid var(--border);
    border-radius: 10px; /* Slightly larger than the 8px buttons inside */
    padding: 4px;
    background-color: var(--bg); /* Keeps the card distinct from the buttons */
}

.multi-btn .btn-main {
    width: 100%;
}

.multi-btn .btn-tray {
    display: flex;
    gap: 4px;
    width: 100%;
}

.multi-btn .btn-tray .btn {
    flex: 1;
    padding: 4px 0; 
}



/* Any element with a data-tooltip acts as the anchor */
[data-tooltip] {
    position: relative; 
}

/* The tooltip box */
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 4px); /* Snug above the element */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1000;
    
    /* Snaps instantly, no transitions */
    visibility: hidden; 
    
    /* Shape and sizing */
    display: block;
    width: max-content;
    height: max-content;
    box-sizing: border-box;
}

/* Hover trigger (Ignores empty tooltips automatically) */
[data-tooltip]:not([data-tooltip=""]):hover::after {
    visibility: visible;
}

/* --- Position Modifiers --- */

/* Bottom */
.tooltip-bottom::after {
    bottom: auto;
    top: calc(100% + 4px);
}

/* Left Edge (Included your old -edge class name so legacy HTML doesn't break) */
.tooltip-left::after {
    left: 0;
    transform: translateX(0);
}

/* Right Edge (Included your old -edge class name so legacy HTML doesn't break) */
.tooltip-right::after {
    left: auto;
    right: 0;
    transform: translateX(0);
}