/* Main Container & Layout */
#rosary-container { max-width: 1200px; margin: 2em auto; font-family: sans-serif; }
#rosary-container:focus { outline: none; }
.rosary-layout { display: flex; flex-direction: row; gap: 2em; align-items: flex-start; }
.rosary-svg-wrapper { flex: 1.5; position: relative; min-width: 300px; }

/* Stable Button & Scrolling Guide Panel */
#rosary-guide { 
    flex: 1; 
    position: sticky; 
    top: 50px; 
    border: 1px solid #e5e7eb; 
    border-radius: 8px; 
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 100px); /* Adjust based on site header height */
    background: #f9fafb;
}
.guide-content {
    padding: 1.5em 2em;
    overflow-y: auto; /* This makes the text scrollable, not the whole box */
    flex-grow: 1;
}
.guide-navigation {
    padding: 1em 2em;
    flex-shrink: 0; /* Prevents the nav from shrinking */
    border-top: 1px solid #e5e7eb;
}

/* Mystery Selector Buttons */
.mystery-selector { text-align: center; margin-bottom: 1.5em; }
.mystery-selector h4 { margin: 0 0 10px 0; color: #333; font-weight: 600; }
.mystery-btn { background-color: #fff; border: 1px solid #ccc; padding: 8px 16px; border-radius: 20px; cursor: pointer; transition: all 0.2s ease; font-size: 0.9em; margin: 2px; }
.mystery-btn.active { background-color: #005a9c; color: white; border-color: #005a9c; }
.mystery-btn:not(.active):hover { background-color: #f0f0f0; }

/* SVG Styles */
#rosary-svg { width: 100%; height: auto; display: block; }
.rosary-strings rect { fill: #d1d5db; stroke: #6b7280; stroke-width: 1.5px; }
#rosary-svg [data-step] { cursor: pointer; }

/* Tooltip Styles */
#rosary-tooltip { position: absolute; background-color: rgba(0, 0, 0, 0.85); color: white; padding: 8px 12px; border-radius: 6px; font-size: 0.9em; z-index: 10; pointer-events: none; transition: opacity 0.2s, top 0.2s, left 0.2s; white-space: nowrap; }
#rosary-tooltip.hidden { opacity: 0; visibility: hidden; }
#rosary-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent; }

/* Guide Text Styles */
#prayer-step-title { margin-top: 0; font-size: 1.5em; color: #003366; }
#prayer-step-description { font-size: 1.1em; line-height: 1.6; margin-bottom: 1em; color: #4b5563; }
#prayer-full-text { background-color: #fff; border-left: 4px solid #005a9c; padding: 1em; margin: 1em 0; line-height: 1.7; border-radius: 0 4px 4px 0; white-space: pre-wrap; /* Preserves newlines */ }

/* Navigation buttons */
.guide-navigation { display: flex; justify-content: space-between; }
#previous-step, #next-step { background-color: #005a9c; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 1em; transition: background-color 0.2s; }
#previous-step:hover, #next-step:hover { background-color: #003366; }
#previous-step:disabled, #next-step:disabled { background-color: #ccc; cursor: not-allowed; }

/* Responsive */
@media (max-width: 900px) {
    .rosary-layout { flex-direction: column; }
    #rosary-guide { position: static; max-height: none; }
}