/* ===== PICKER'S GUIDE PRACTICE ENGINE STYLES ===== */
/* ===== PHIL FERNBACH: CREATED DECEMBER 2025 ===== */
/* ===== UPDATED: JANUARY 2025 ===== */

/* === Dock-wide loading overlay === */
.pg-dock-loading {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
#pg-practice-engine-dock.is-loaded .pg-dock-loading {
  opacity: 0;
  visibility: hidden;
}
.pg-dock-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--pg-border-strong);
  border-top-color: var(--pg-accent);
  border-radius: 50%;
  animation: pg-dock-spin 0.9s linear infinite;
}
@keyframes pg-dock-spin {
  to { transform: rotate(360deg); }
}

/* === Player Dock === */
#pg-practice-engine-dock {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 650px; 
  height: 450px; 
  z-index: 999999;
  background: var(--pg-surface);
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  transform: translateY(120%);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), width 0.3s ease, height 0.3s ease;
  border: 1px solid var(--pg-border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  resize: both; 
  overflow: hidden; 
	  min-width: 200px; 
  min-height: 75px;
}

#pg-practice-engine-dock.is-active {
  transform: translateY(0);
}

#pg-practice-engine-dock::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18px; 
  height: 18px;
  cursor: nwse-resize !important; 
  pointer-events: auto; 
  background: linear-gradient(135deg, 
    transparent 45%, var(--pg-white) 45%, var(--pg-white) 50%, 
    transparent 50%, transparent 65%, var(--pg-white) 65%, var(--pg-white) 70%, 
    transparent 70%, transparent 85%, var(--pg-white) 85%, var(--pg-white) 90%, 
    transparent 90%);
  z-index: 999999;
  opacity: 0.4; 
  transition: opacity 0.2s ease;
}

.pg-dock-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 15px;
  background: var(--pg-blue);
  cursor: grab;
  border-bottom: 1px solid var(--pg-border);
		margin-bottom:4px;
}


/* 1. Ensure the Player Container provides the 'gutter' */
#pg-practice-player {
    width: 100%;
    height: 100%;
    /* Keep this 12px padding - it creates the gap on the left and right */
    padding: 0px 12px 12px 12px !important; 
    box-sizing: border-box; /* Ensures padding doesn't push width over 100% */
    display: flex;
    flex-direction: column;
}

/* 2. Fix the Wrapper and Table */
.pg-table-wrapper {
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden;
    min-height: 0;
    /* CHANGE: Remove width: 100% to let it respect parent padding */
    width: auto; 
    /* Add inner padding so rows don't touch the scrollbar */
    padding-right: 5px; 
    padding-bottom: 50px; 
}

#pg-main-table {
    width: 100%;
    border-collapse: collapse;
    /* IMPORTANT: Force it to behave like a block so rows can be Flex */
    display: block; 
}

#sectionsBody {
    display: block;
    width: 100%;
}

.pg-section-row {
    display: flex !important;
    width: 100%;
    /* Ensure the row content starts exactly at the left edge of the gutter */
    padding: 0; 
    box-sizing: border-box;
}

/* 1. Kill the flex stretch and padding when focusing */
#pg-practice-engine-dock:has(#pg-main-table.is-focus-mode) .pg-table-wrapper {
    flex: none !important;      /* Stop the wrapper from growing to fill the dock */
    padding-bottom: 0 !important; /* Remove the 50px scroll buffer */
    height: auto !important;
}

/* 2. Ensure the Player container also shrinks */
#pg-practice-engine-dock:has(#pg-main-table.is-focus-mode) #pg-practice-player {
    height: auto !important;
    flex: none !important;
}

/* 3. The Dock itself must hug the content */
#pg-practice-engine-dock:has(#pg-main-table.is-focus-mode) {
    height: auto !important;
    min-height: 0 !important; /* Allow it to be as small as the two rows */
}


/*= SONG TITLE (Restored) =*/
.pg-dock-title {
    flex: 1;
    font-size: var(--pg-text-base);
    font-weight: 800;
    color: var(--pg-white);
    text-transform: uppercase;
    letter-spacing: 1px;
    pointer-events: none;
    margin: 0;
}

/*= BUTTON GROUP =*/
.pg-header-actions {
    display: flex;
    align-items: center;
    gap: 0;
}

/*= SHARED BUTTON STYLE =*/
.pg-header-icon, 
.pg-dock-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;      /* Vertical Center */
    justify-content: center;   /* Horizontal Center */
    background: transparent !important;
    border: none !important;
    color: var(--pg-white) !important;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

/*= THE X AT 30px =*/
.pg-dock-close {
    font-size: 30px !important;
    line-height: 0 !important; /* Mathematical centering */
    font-family: Arial, sans-serif !important;
}

/*= THE FULLSCREEN ICON =*/
.pg-header-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
    display: block;
}

/*= HOVER EFFECTS =*/
.pg-header-icon:hover, 
.pg-dock-close:hover {
    color: var(--pg-white) !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 4px;
}

/* 1. THE CONTAINER FIX: This allows the scroll to reach the absolute bottom */
.pg-table-wrapper {
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden;
    min-height: 0;
    width: 100%;
    /* This padding acts as a "buffer" so the last row isn't cut off */
    padding-bottom: 50px; 
}

/* 2. UPDATED SCROLLBAR: Targeting the wrapper instead of tbody */
.pg-table-wrapper::-webkit-scrollbar {
    width: 6px;
}
.pg-table-wrapper::-webkit-scrollbar-track {
    background: var(--pg-surface);
}
.pg-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--pg-border);
    border-radius: 10px;
}
.pg-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--pg-border-strong);
}

/* 3. THE ROW FIX: Forces rows to stay at 55px so they don't 'squish' */
.pg-section-row {
    display: flex !important;
    width: 100%;
    height: 55px !important;
    min-height: 55px !important;
    flex-shrink: 0 !important; /* This is the most important line for scrolling */
}

/* ===== The Player ===== */
#pg-practice-player {
  width: 100%;
  height: 100%;
  border: none; 
padding: 0px 12px 12px 12px !important;
  background: var(--pg-surface);
  color: var(--pg-white);
  font-family: inherit;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#pg-practice-player .pg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

/*=== Main Button Row ===*/
#pg-practice-player .pg-transport {
  display: flex;
  flex-direction: column; 
  align-items: center;    
  gap: 4px;
  margin-bottom: 10px; 
  width: 100%;
}

.pg-transport-buttons {
    display: flex;
    justify-content: flex-start; /* Alignment for the Move to Left */
    align-items: center;
    gap: 12px; 
    width: 100%;
    position: relative;
}

/*== Play and Stop Buttons ==*/
#pg-practice-player .pg-btn-icon {
  position: relative; 
  min-width: 40px !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 1px solid var(--pg-border) !important;
  background: var(--pg-surface-raised) !important;
  color: var(--pg-white) !important;
  outline: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

#playPause:disabled {
    font-size: 9px !important;
    letter-spacing: -0.2px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    text-transform: uppercase;
}
#pg-practice-player .pg-btn-icon:hover {
  background: #222 !important;
  border-color: var(--pg-border-strong) !important;
}
#pg-practice-player .pg-btn-icon:disabled {
  cursor: default !important; 
  pointer-events: none; 
}

#pg-practice-player .pg-btn-icon svg { width: 20px !important; height: 20px !important; }

/* This makes the icons 'invisible' to clicks so the button always gets them */
#playPause svg, 
#stop svg, 
.pg-sec-play-btn svg {
    pointer-events: none !important;
}
/*=== Utility Row ===*/
#pg-practice-player #clearLoops svg, 
#pg-practice-player #toggleFocus svg,
#pg-practice-player .pg-subloop-btn svg {
    width: 16px !important;  /* Restored to 16px */
    height: 16px !important; /* Restored to 16px */
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2;
}

#pg-practice-player #toggleFocus,
#pg-practice-player .pg-subloop-btn {
    min-width: 30px !important;
    width: 30px !important;
    height: 30px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--pg-white) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
}

/*=== Loop Status Text ===*/
#pg-practice-player .pg-status-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px; 
  margin-bottom: 2px; 
}
#pg-practice-player #loopStatus,
#pg-practice-player .pg-status-text {
  font-size: 12px !important;
  color: var(--pg-text-muted) ;
  text-align: center;      
  line-height: 1.2 !important;
  font-weight: 500 !important;
  margin-left: 10px !important;
  padding: 0 !important;
}

#loopStatus.is-looping {
    color: var(--pg-gold) !important; 
    font-weight: bold;
    text-shadow: 0 0 5px rgba(46, 204, 113, 0.3); /* Subtle glow */
}

/* SPEED UP BUTTON */
.pg-speed-widget-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 15px;
    height: 30px;
    z-index: 1000;
	opacity: 0.4;            /* Makes it look "greyed out" and faded */
    filter: grayscale(100%); /* Removes all color to make it truly grey */
    pointer-events: none;    /* Stops users from clicking it while it's "disabled" */
	/*display: none; /* Hidden by default */
}



/* 2. Show it ONLY when loopStatus has the 'is-looping' class */
/* Note: This assumes they are siblings in the transport row */
.is-looping ~ .pg-speed-widget-wrap,
.is-looping + .pg-speed-widget-wrap {
opacity: 1 !important;
    filter: grayscale(0%) !important;
    pointer-events: auto !important;
}
/* 2. Main Button - Fixed Focus Ring */
.pg-speed-pill-main {
    background: var(--pg-surface-raised) !important; 
    border: 1px solid var(--pg-border) !important;
    color: var(--pg-white) !important;         
    border-radius: 20px; 
    padding: 0 15px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    /* STOP THE WEIRD BORDER */
    outline: none !important;
}

/* Ensure no border appears when clicked/focused */
.pg-speed-pill-main:focus {
    outline: none !important;
    border: 1px solid var(--pg-border) !important;
}

.pg-speed-pill-main:hover {

    outline: none !important;
    border: 1px solid var(--pg-border) !important;
    background: #222 !important;   
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}

.pg-speed-pill-main:active {
    transform: scale(0.94);        
    background: var(--pg-surface) !important; 
	    outline: none !important;
    border: 1px solid var(--pg-border) !important;
}

.pg-speed-pill-main.active {
    color: #00FF00 !important;
    background: rgba(0, 255, 0, 0.1) !important;
	    outline: none !important;
    border: 1px solid var(--pg-border) !important;
}

.pg-speed-popup {
    display: none; 
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    padding-top: 12px;
    z-index: 999999;
    width: max-content !important; /* Overrides transport row stretch */
}

.pg-speed-widget-wrap:hover .pg-speed-popup { display: flex; }

.pg-speed-menu-inner {
    display: inline-flex;    /* Inline-flex prevents 100% expansion */
    flex-direction: row;
    align-items: center; 
    background: #121212;
    border: 1px solid var(--pg-border-strong);
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.9);
}

/* 4. Layout Sections */
.pg-menu-section {
    flex: none;              /* Stops BPM/LOOPS from pushing apart */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pg-menu-label {
    font-size: 10px;
    color: var(--pg-white);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

.pg-label-top { margin-bottom: 4px; }
.pg-label-bottom { margin-top: 4px; }
.pg-label-spacer { visibility: hidden; margin-bottom: 4px; }

.pg-menu-divider {
    width: 1px;
    background: var(--pg-border);
    height: 30px;
    margin: 0 10px;
}

/* 5. Stepper - FIXED widths */
.pg-stepper-pill {
    display: flex;
    align-items: center;
    background: var(--pg-surface-raised);
    border: 1px solid var(--pg-border-strong);
    border-radius: 3px;
    overflow: hidden;
    height: 22px;
}

.pg-stepper-input {
    width: 30px;
    height: 100%;
    background: transparent !important;
    border: none !important;
    color: #00FF00 !important;
    text-align: center;
    font-weight: 800;
    font-size: 11px;
    outline: none;
    padding: 0;
    -moz-appearance: textfield;
}

.pg-stepper-input::-webkit-outer-spin-button,
.pg-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pg-step-btn {
    background: var(--pg-border) !important;
    border: none !important;
    color: var(--pg-white) !important;
    width: 20px !important;
    flex: 0 0 20px !important; /* Forces width despite parent flex rules */
    height: 100%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pg-step-btn:hover { background: var(--pg-border-strong) !important;  }

/* 6. Progress Border SVG */
.pg-speed-svg {
    position: absolute;
    top: -1px; left: -1px;
    width: calc(100% + 2px); 
    height: calc(100% + 2px);
    pointer-events: none;
    overflow: visible;
    display: none !important; 
}

.pg-speed-rect {
    stroke: #00FF00;
    stroke-width: 2.5px;
    fill: none;
    rx: 20px;
    /* This adds a "ghost" version of the border so you see the slots */
    filter: drop-shadow(0 0 1px rgba(0, 255, 0, 0.3));
    transition: stroke-dasharray 0.3s ease;
}

/* THE KEY ADDITION: A dim background track */
.pg-speed-rect-bg {
    stroke: rgba(0, 255, 0, 0.15); /* Very dim green slots */
    stroke-width: 2px;
    fill: none;
    rx: 20px;
}

.pg-speed-pill-main.active .pg-speed-svg {
    display: block !important;
}

/*== Pre-Roll Button Cohesive Style ==*/
#pg-practice-player .pg-preroll-btn-wrap {
    margin-left: auto !important;
}

.pg-preroll-btn-wrap {
    position: relative !important; 
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.1); /* Matches Pin Button */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    height: 32px !important; /* Matches Pin Height */
    width: 70px !important;  /* Compact width to match Pin look */
}

#pg-preroll-main-btn {
    background: transparent !important;
    border: none !important;
    height: 100% !important;
    width: 100% !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Centers the whole stack */
    padding: 0 !important;
    color: var(--pg-white); 
    cursor: pointer;
    gap: 6px !important; /* Brings number closer to label */
}

.pg-preroll-info-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 28px; /* Narrower to fit the 65px total */
}

.pg-icon-timer { 
    opacity: 0.8;
    width: 14px !important; 
    height: 14px !important; 
}

.pg-preroll-label {
    font-size: 9px; /* Slightly smaller for the tight fit */
    font-weight: 800;
    line-height: 1;


}

#pg-preroll-num-display {
    font-size: 12px;
    font-weight: bold;
    color: fff;
     background: #0a0a0a !important;  
    width: 22px; 
    height: 22px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    border-radius: 4px;
    border: 2px solid transparent; /* Border for active states */
    transition: border-color 0.2s;
}
/* Active State Colors - 3px Border on Number Display Only */

/* --- ONCE --- */
#pg-preroll-main-btn.active-once { 
    color: #cc6633 !important; 
    background: rgba(0, 0, 0, 0.2) !important; /* Subtle background for the pill */
    border: none !important; /* No border on the main button */
}

#pg-preroll-main-btn.active-once #pg-preroll-num-display { 
    border: 3px solid #cc6633 !important; /* 3px border on the number */
    border-radius: 4px !important;
    margin-right: -2px !important; 
}

/* --- EVERY --- */
#pg-preroll-main-btn.active-every { 
    color: #ff6600 !important; 
    background: rgba(0, 0, 0, 0.2) !important;
    border: none !important; /* No border on the main button */
}

#pg-preroll-main-btn.active-every #pg-preroll-num-display { 
    border: 3px solid #ff6600 !important; /* 3px border on the number */
    border-radius: 4px !important;
    margin-right: -2px !important; 
}
/*=== Targeted Preroll Animation ===*/

/* 1. Target the Icon and Label specifically for transition */
#pg-practice-player .pg-preroll-info-stack i,
#pg-practice-player .pg-preroll-info-stack svg,
#pg-practice-player .pg-preroll-info-stack span:not(.pg-number-class) {
    transition: transform 0.2s ease !important;
    display: inline-block;
}

/* 2. Grow ONLY the icon/label when hovering over the stack */
#pg-practice-player .pg-preroll-info-stack:hover i,
#pg-practice-player .pg-preroll-info-stack:hover svg {
    transform: scale(1.1) !important;
}

/* 3. Shrink ONLY the icon/label when clicking the stack */
#pg-practice-player .pg-preroll-info-stack:active i,
#pg-practice-player .pg-preroll-info-stack:active svg {
    transform: scale(0.9) !important;
    transition: transform 0.05s ease !important;
}

/* 4. Keep the number display stable */
#pg-practice-player #pg-preroll-num-display {
    transform: scale(1) !important; /* Forces it to ignore parent scaling if needed */
    transition: none !important;
}

/* 1. Reset the menu so it's not a tiny 32px column */
/* 1. The Menu Container */
#pg-preroll-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    display: none; /* Controlled by JS .is-active */
    flex-direction: column !important;
    align-items: center !important;
    padding: 10px !important;
    background: var(--pg-surface-raised) !important;
    border: 1px solid var(--pg-border-strong) !important;
    border-radius: 6px !important;
    min-width: 100px !important;
}

#pg-preroll-menu.is-active {
    display: flex !important;
}

/* 2. The Beats Label (Top) */
.pg-beats-label {
    font-size: 10px !important;
    color: var(--pg-white) !important;
    font-weight: 800 !important;
    margin-bottom: 6px !important;
	text-align: center;
}

/* 3. The Stepper Row (Middle) */
.pg-stepper-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 30px !important; /* Defined height helps stabilize hitboxes */
}

.pg-step-btn {
    /* 1. Increase physical size */
    width: 24px !important;
    height:24px !important;
    min-width: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--pg-border) !important;
    border: 1px solid var(--pg-border-strong) !important;
    color: var(--pg-white) !important;
    cursor: pointer !important;
    font-size: 18px !important; /* Slightly larger icon */
    border-radius: 4px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    position: relative;
	z-index: 10 !important;
}


/* 3. Ensure the number doesn't push buttons around */
#pg-menu-beats-display {
    color: #4CAF50 !important;
    font-weight: 800 !important;
    font-family: monospace !important;
    font-size: 15px !important;
    min-width: 20px !important;
    text-align: center !important;
    line-height: 26px !important; /* Match button height */
}

#pg-practice-player #pg-preroll-num-display:hover {
    /*background: rgba(255, 255, 255, 0.15) !important;==*/
   /* color: var(--pg-white) !important;==*/
    transform: translateY(-1px);
}


/*== 1. Pin and snap Buttons ==*/
/*== 1. The Container (Tight Pill) ==*/
.pg-pin-group {
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
    background: rgba(255, 255, 255, 0.1); 
    border-radius: 6px;
    padding: 0;
    margin: 0 4px;
    height: 32px; 
    width: 44px !important; /* Total width locked to prevent stretching */
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/*== 2. Shared Button Base ==*/
#pg-practice-player .pg-subloop-btn,
#pg-snap-btn {
    border: none !important;
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* PIN BUTTON: Main side (Takes remaining space) */
#pg-practice-player .pg-subloop-btn {
    flex: 1; 
    position: relative;
    color: var(--pg-white) !important; /* Explicitly white */
}

.pg-icon-pin {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/*== 3. PIN GOLD BORDER LOGIC ==*/
#pg-practice-player .pg-subloop-btn::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    height: 100%; width: 0%;
    border: 3px solid var(--pg-gold);
    border-right: none; 
    border-radius: 4px 0 0 4px;
    pointer-events: none;
    opacity: 0;
    transition: width 0.3s ease, opacity 0.2s ease;
}

#pg-practice-player .pg-subloop-btn.is-active-start::before { width: 50%; opacity: 1; }
#pg-practice-player .pg-subloop-btn.is-active-complete::before { 
    width: 100%; 
    border-right: 3px solid var(--pg-gold); 
    border-radius: 4px; 
    opacity: 1; 
}

/*== 4. SNAP STATE (Red Active with Glowing Background) ==*/

/* SNAP BUTTON: Skinnier side */
#pg-snap-btn {
    width: 10px !important; 
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
    /* Two-toned Magnet Look (Inactive: Dimmed) */
    background: linear-gradient(to bottom, 
        rgba(0, 120, 255, 0.15) 50%, 
        rgba(255, 50, 50, 0.15) 50%
    ) !important;
    transition: all 0.2s ease;
}

.pg-icon-snap {
    display: none !important;
}

#pg-snap-btn.is-active {
    /* Two-toned Magnet Look (Active: Vibrant Glow) */
    background: linear-gradient(to bottom, 
        rgba(0, 180, 255, 0.8) 50%, 
        rgba(255, 50, 50, 0.8) 50%
    ) !important;
    
    /* Overall Glow effect */
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
}

#pg-snap-btn:not(.is-active) {
    /* Ensures the dim state remains visible but quiet */
    opacity: 0.6;
}
/*== Pin Styling ==*/
.pg-boundary-marker {
    position: absolute;
    top: -4px; height: 16px; width: 2px;
    background: var(--pg-gold) !important;
    z-index: 10; display: none;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
}

/* Show pins only when active class is applied */
.loop-start-marker .marker-start, 
.loop-end-marker .marker-end { display: block; }

/* The Head - Hidden until hover */
.pg-boundary-marker::after {
    content: '';
    position: absolute;
    top: -6px; left: 50%;
    transform: translateX(-50%);
    width: 10px; height: 10px;
    background: inherit; border-radius: 50%;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    opacity: 0; transition: opacity 0.2s;
}

/* Show head on hover or drag */
.pg-sec-progress-container:hover .pg-boundary-marker::after,
.pg-boundary-marker:active::after { opacity: 1; }

/*== Clear Button ==*/
#clearLoops { color: var(--pg-danger) !important; border-color: var(--pg-danger) !important; }
#clearLoops svg { stroke: var(--pg-danger) !important; }
#pg-practice-player #clearLoops {
    min-width: 30px !important;
    width: 30px !important;
    height: 30px !important;
    background: transparent !important;
    border: none !important;
    padding-top: 0px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    color: var(--pg-danger) !important; 
}
#pg-practice-player #clearLoops:disabled {
    display: none !important;}

/* Highly specific hover state to override existing !important tags */
body #pg-practice-player #clearLoops:hover:not(:disabled) {
    background-color: rgba(231, 76, 60, 0.15) !important;
    transform: scale(1.1) !important;
    transition: all 0.2s ease !important;
}

/* Highly specific focus state */
body #pg-practice-player #clearLoops:focus-visible {
    outline: 2px solid var(--pg-danger) !important;
    outline-offset: 2px !important;
}

/* Highly specific click/active state */
body #pg-practice-player #clearLoops:active:not(:disabled) {
    transform: scale(0.9) !important;
    background-color: rgba(231, 76, 60, 0.3) !important;
}


/*== Focus Button ==*/


/* 1. RESTORE FOCUS MODE HIDING LOGIC */
/* Target the specific ID and force display:none to override our flex fix */
#pg-main-table.is-focus-mode .pg-section-row {
    display: none !important;
}

/* 2. SHOW ACTIVE ROWS IN FOCUS MODE */
/* Target rows marked as active or with a checked checkbox */
#pg-main-table.is-focus-mode .pg-section-row.pg-loop-active,
#pg-main-table.is-focus-mode .pg-section-row:has(.pg-loop-checkbox:checked) {
    display: flex !important;
}

/* 3. RESTORE HOVER BEHAVIORS */
/* Focus Button Hover */
#pg-practice-player #toggleFocus:not(.is-active):hover {
    color: var(--pg-success) !important;
    background: rgba(83, 169, 107, 0.1) !important;
    cursor: pointer !important;
}

/* Focus Button Active State */
#pg-practice-player #toggleFocus.is-active {
    background: var(--pg-success) !important;
    border-color: var(--pg-success) !important;
    color: var(--pg-white) !important;
    box-shadow: 0 0 15px rgba(83, 169, 107, 0.4) !important;
    border-radius: 50% !important;
}

/* 4. DOCK AUTO-HEIGHT IN FOCUS MODE */
/* Update the selector to use the table ID */
#pg-practice-engine-dock:has(#pg-main-table.is-focus-mode) {
    height: auto !important; 
    /*min-height: 300px;
    max-height: 500px; */
}

/* 5. RESTORE ICON CLICKABILITY */
/* Ensure the svg doesn't block the button click, but the button is clickable */
#toggleFocus svg, .pg-subloop-btn svg {
    pointer-events: none !important;
}

#toggleFocus, .pg-subloop-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/*=== Main Progress Bar ===*/
/*=== 1. The Progress Area Wrapper ===*/
.pg-progress-wrapper {
    position: relative;
    flex-grow: 1;
    height: 32px;
    display: flex;
    align-items: center;
    margin: 0 !important; 
    overflow: visible !important;
}

/*=== 2. YOUR ORIGINAL SLIDER STYLES ===*/
#pg-practice-player #progress {
    width: 100%;
    margin: 0 !important; 
    background: transparent !important;
    -webkit-appearance: none;
    display: block;
    cursor: pointer;
    position: relative;
    z-index: 5;
}

#pg-practice-player #progress::-webkit-slider-runnable-track {
    height: 8px;
    background: linear-gradient(to right, 
        var(--pg-blue) 0%, 
        var(--pg-blue) var(--progress-pct, 0%), 
        #222 var(--progress-pct, 0%), 
        #222 100%);
    border: 0px solid var(--pg-border);
    border-radius: 4px;
}

#pg-practice-player #progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px !important; 
    height: 16px !important;
    background: var(--pg-white) !important;
    border: 1px solid var(--pg-surface) !important;
    border-radius: 50% !important;
    margin-top: -5px !important;
    position: relative !important;
    z-index: 20 !important;
}

#pg-section-markers {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 8px; /* This keeps the markers 8px tall */
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
}

.pg-marker {
    position: absolute;
    top: 0; 
    bottom: 0;
    width: 1px !important;
    background-color: #00E5FF !important;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    pointer-events: auto !important;
}

/* New Hit Box Layer */
.pg-marker::before {
    content: "";
    position: absolute;
    left: -5px;
    right: -5px;
    top: -10px;
    bottom: -10px;
    background: transparent;
}

.pg-marker::after {
    content: attr(data-label);
    position: absolute;
    bottom: 15px;
    left: 0px; 
    transform: none; 
    background: rgba(0, 0, 0, 0.85);
    color: #00E5FF !important;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 0 4px 4px 0;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
    pointer-events: none;
    z-index: 100;
}

.pg-marker:hover::after {
    opacity: 1;
}

/* Show label when the parent marker is active */
.pg-marker.active-marker::after {
    opacity: 1 !important;
}

/*=== Timeline Layout (FIXED ALIGNMENT) ===*/
#pg-practice-player .pg-timeline {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center; 
    column-gap: 10px;
    margin: 12px 0 20px; 
    height: 32px; /* Explicit height to match the progress bar */
}

#pg-practice-player .pg-time {
    font-size: 13px;
    color: var(--pg-text-muted); 
    /* This line-height forces the text to center exactly with the 32px bar */
    line-height: 32px !important; 
    height: 32px !important;
    font-variant-numeric: tabular-nums;
    display: block; 
}

/*=== 1. Main Controls Layout (Right Justified) ===*/
/* Update this block to fix vertical alignment and reduce top margin */
#pg-practice-player .pg-controls {
    display: flex !important;
    align-items: center !important; /* Changed from flex-start to center for vertical alignment */
    justify-content: flex-start !important; 
    gap: 12px !important; 
    margin-bottom: 10px !important; 
    width: 100% !important;
}
#pg-practice-player .pg-field {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important; 
}

/*=== 2. The Anchored Label "Tabs" ===*/
#pg-practice-player .pg-label-wrapper {
    display: flex !important;
    align-items: center !important;
    height: 30px !important; 
    padding: 0 12px !important;
    background-color: var(--pg-surface-raised) !important; 
    border: 1px solid var(--pg-border) !important; 
    border-radius: 25px !important;
    margin-bottom: 0px !important;
    cursor: pointer !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Individual Width Adjustments
   Key: was 80px, but the original-key option gets a "• " prefix
   (e.g. "• Eb"), so 80px clipped the second character. 110px fits
   "• Eb" / "• F#" / "• C#" comfortably. */
#pg-practice-player .pg-field:nth-child(1) .pg-label-wrapper { width: 110px !important; }
#pg-practice-player .pg-field:nth-child(2) .pg-label-wrapper { width: 170px !important; }
#pg-practice-player .pg-field:nth-child(3) .pg-label-wrapper { width: 120px !important; }

#pg-practice-player .pg-field:hover .pg-label-wrapper {
    border-color: var(--pg-success) !important;
}

/*=== 3. KEY HITBOX & TEXT FIX ===*/
 #pg_key {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    color: var(--pg-success) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding-left: 42px !important;
    cursor: pointer !important;
    z-index: 5 !important;
display: flex !important;
    align-items: center !important; 
    line-height: 1 !important;
}

#pg-practice-player .pg-label {
    font-size: 11px !important;
    color: var(--pg-text-muted) !important;
    font-weight: 700 !important;
    margin-right: 4px !important;
    pointer-events: none;
    z-index: 1 !important;
}

#pg-practice-player .pg-inset-value {
    font-size: 11px !important;
    color: var(--pg-success) !important;
    font-weight: 700 !important;
}

/* Update the existing .pg-field-inset block */
#pg-practice-player .pg-field-inset {
    position: absolute !important;
    top: 38px !important; 
    
    /* 1. Center horizontally relative to the label */
    left: 50% !important;
    right: auto !important;
    
    /* 2. Use transform to shift back by half its own width */
    /* Note: We add the Y-offset here for the hover animation */
    transform: translateX(-50%) translateY(-5px) !important;
    
    height: 32px !important;
    width: 240px !important; /* This is the width you previously set */
    background: #0a0a0a !important; 
    border: 1px solid var(--pg-border) !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 40px !important; 
    box-sizing: border-box !important;
    z-index: 10000 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out !important;
}

/* This tells the hidden slider to show up when you hover over the pill area */
#pg-practice-player .pg-field:hover .pg-field-inset {
    opacity: 1 !important;
    visibility: visible !important;
    /* This keeps it centered (translateX) while moving it into position (translateY) */
    transform: translateX(-50%) translateY(0) !important;

}

/* 4. REMOVE the specific Tempo offset that was shifting it right */
#pg-practice-player .pg-field:nth-child(2) .pg-field-inset {
    right: auto !important; /* Overrides the previous -50px setting */
}

#pg-practice-player .empty-key { display: none !important; }

/*=== 5. Slider & Track Styling ===*/
#pg-practice-player input[type="range"] {
    -webkit-appearance: none;
    width: 100% !important;
    background: transparent !important;
}

#pg-practice-player input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 14px !important;
    width: 6px !important;
    background: var(--pg-white) !important;
    border-radius: 3px !important;
    margin-top: -5.5px !important; 
    border: none !important;
}

#pg-practice-player input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    background: var(--pg-border-strong); 
    border-radius: 2px;
}

/*=== 6. Icons ===*/
#pg-practice-player .pg-field-inset::before,
#pg-practice-player .pg-field-inset::after {
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.7;
}

#pg-practice-player .pg-field-inset::before { left: 14px; }
#pg-practice-player .pg-field-inset::after { right: 14px; }

/* SVG Icons */
/* Update SVG Icons to White (%23FFF) */
#pg-practice-player .pg-field-inset:has(#tempo)::before { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23FFF" stroke-width="2.5" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/></svg>'); }
#pg-practice-player .pg-field-inset:has(#tempo)::after { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23FFF" stroke-width="2.5" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>'); }
#pg-practice-player .pg-field-inset:has(#mix)::after { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23FFF" stroke-width="2" stroke-linecap="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/></svg>'); }
#pg-practice-player .pg-field-inset:has(#mix)::before { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23FFF" stroke-width="2" stroke-linecap="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>'); }

/* 2. Add pointer cursor and hover brightness to the icons */
#pg-practice-player .pg-field-inset::before,
#pg-practice-player .pg-field-inset::after {
    cursor: pointer !important;
    transition: opacity 0.2s ease, filter 0.2s ease !important;
    opacity: 0.6 !important; /* Slightly dimmer by default */
    pointer-events: auto !important; /* Ensures they can detect a mouse */
}

/* Hovering near the left edge brightens the left icon */
#pg-practice-player .pg-field-inset:hover::before,
#pg-practice-player .pg-field-inset:hover::after {
    opacity: 0.8 !important;
}

/* When the JavaScript logic detects a click in the left/right 40px zones, 
   we can simulate a click state via the :active state of the inset itself */
#pg-practice-player .pg-field-inset:active::before,
#pg-practice-player .pg-field-inset:active::after {
    transform: translateY(-50%) scale(0.85) !important;
    opacity: 1 !important;
}


/*==== Sections Table ====*/
#pg-practice-player table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0px;
    display: flex !important;
    flex-direction: column;
    flex: 1; 
    min-height: 0;
}

#pg-practice-player tbody {
    display: block !important;
    flex: 1; 
    overflow-y: auto; 
    width: 100%;
}

#pg-practice-player tr {
    display: flex !important; 
    align-items: center; 
    width: 100%;
	border-top: 1px solid #222;
    min-height: 65px !important; 
    position: relative;
}


#pg-practice-player tr:first-child {
    border-top: 1px solid #222 !important;
}

#pg-practice-player td {
    padding: 8px 0;
    border: none;
    display: flex;
    align-items: center;
}

/* Column 1: Label */
#pg-practice-player td:nth-child(1) { 
    flex: none !important; 
    width: 120px !important; 
    padding-left: 4px !important;
} 
#pg-practice-player .pg-sec-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--pg-text-muted);
    white-space: nowrap;
    line-height: 1.2;
}

/* Column 2: Progress Bar Stack */
#pg-practice-player td:nth-child(2) { 
    flex: 1 !important; 
    min-width: 0;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; 
    align-items: flex-start !important; 
    position: relative !important; /* Anchor for independent buttons */
} 

/* Progress Bar Styling */
.pg-sec-progress-container {
    width: 100%;
    height: 8px;
    background: #222;
    border-radius: 4px;
    overflow: visible; 
    position: relative;
    cursor: pointer;
    margin-top: 1px !important;
}
.pg-sec-progress-bar {
    height: 100%;
    width: 0%;
    background: transparent;
    transition: width 0.1s linear;
    position: relative;
    z-index: 2; 
    border-radius: 4px;
}

.active-row .pg-sec-progress-bar {
    background: var(--pg-blue) !important;
}

/* Button Bank */
.pg-btn-bank {
    position: absolute !important;
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    width: 100%;
    top: 10px !important;
    left: 0;
margin-top: -35px !important;
	line-height: 0; 
    box-sizing: border-box;
}


#pg-practice-player .pg-section-row:hover {
    background: var(--pg-surface-raised);
}

.pg-btn-small, 
.pg-loop-label {
    width: 20px !important;
    height: 16px !important; 
    min-width: 20px !important;
    border: none !important; 
    background: transparent !important;
    color: #666 !important; 
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
}

.pg-btn-small:hover, 
.pg-loop-label:hover {
    color: var(--pg-white) !important;
    transform: scale(1.1);
}

.pg-btn-small svg, 
.pg-loop-label svg, 
.loop-icon svg {
    width: 14px !important;
    height: 14px !important;
    fill: currentColor !important;
    pointer-events: none !important;
}

/* Column 3: Timer */
#pg-practice-player td:nth-child(3) { 
    flex: none !important; 
    width: 75px !important; 
    justify-content: flex-end;
    padding-right: 10px !important;
}

input.pg-sec-timer {
    background: transparent !important;
    border: none !important;
    color: var(--pg-success) !important; 
    font-size: 13px !important;
    text-align: right;
    width: 65px; 
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    cursor: text;
}

input.pg-sec-timer:focus {
    font-size: 15px !important;      
    font-weight: 800 !important;      
    color: #76d38f !important;         
    background-color: rgba(83, 169, 107, 0.15) !important; 
    box-shadow: 0 0 12px rgba(83, 169, 107, 0.3) !important;
    display: flex;
    align-items: center;
    outline: none !important;
}

@keyframes timerFlash {
    0% { color: var(--pg-white); transform: scale(1.1); }
    100% { color: var(--pg-success); transform: scale(1); }
}

.timer-saved {
    animation: timerFlash 0.4s ease-out !important;
    z-index: 10;
}

/* Active Loop State: Gold/Yellow */
.pg-loop-label:has(input:checked) .loop-icon {
    color: var(--pg-gold) !important; 
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.4));
}
/* --- SOLO MODE --- */
#pg-practice-engine-dock:has(#pg-main-table.pg-solo-active) .pg-table-wrapper {
    flex: none !important;      
    padding-bottom: 0 !important; 
    height: auto !important;
}

#pg-practice-engine-dock:has(#pg-main-table.pg-solo-active) #pg-practice-player {
    height: auto !important;
    flex: none !important;
}
#pg-practice-engine-dock:has(#pg-main-table.pg-solo-active) {
    height: auto !important;
    min-height: 0 !important; 
}

#pg-main-table.pg-solo-active tr {
    display: none !important;
}

#pg-main-table.pg-solo-active tr.is-soloed {
    display: flex !important;
    background: rgba(83, 169, 107, 0.05) !important;
    border-top: 1px solid #222 !important;
}

.pg-solo-btn svg path {
    fill: none !important;
    stroke: currentColor !important;
}

.pg-solo-btn svg circle {
    fill: currentColor !important;
}

tr.is-soloed .pg-solo-btn {
    color: var(--pg-success) !important;
}

#pg-main-table.pg-solo-active.is-focus-mode tr:not(.is-soloed) {
    display: none !important;
}