/* Modern CSS with black and white theme, curved edges, and shadows */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

* {
    box-sizing: border-box;
}

:root {
    /* Adjustable text-size multiplier, set by the A-/A+ controls in the
       header (see Salmastro.applyFontScale in code.js). Almost every rule
       in this file sizes text in rem/em, so scaling this one root font-size
       scales the whole page proportionally -- including inside Piano Mode,
       which clones the same markup. */
    --font-scale: 1;
}

html, body {
    font-size: calc(16px * var(--font-scale));
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #212529;
    overflow-x: hidden;
    line-height: 1.4;
}

/* Main container */
#salmain {
    position: relative;
    width: 95%;
    max-width: 1200px;
    margin: 0rem auto;
    padding: 0rem;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Header styles */
.sal-error-note {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    font-size: 0.8rem;
    color: #f0f0f0;
}
.sal-header {
    position: relative;
    background: linear-gradient(135deg, #000000 0%, #333333 100%);
    color: #ffffff;
    padding: 1.5rem 2rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.sal-header-line {
    margin-bottom: 1.5rem;
}

.sal-header-title {
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    align-items: center;
    justify-content: center;
}

/* Nav, tempo badge, Anno/giorno/settimana and the piano-mode/calendario
   liturgico buttons are all direct children of this one shared flex row
   (see salmastro.php drawHead()). Desktop (this base rule) arranges them as
   nav+icons on one line and badge+info on the next, using `order` below plus
   .sal-tempo-container's flex-basis:100% as the line-break point; the
   max-width:768px override further down re-orders everything for phones
   (nav alone, badge+info+icons together, wrapping onto as many lines as
   needed rather than clipping/scrolling anything out of view). */
.sal-header-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1.5rem;
    margin-bottom: 1rem;
}

.sal-calendar-nav {
    order: 1;
    flex: 1 1 240px;
}

.sal-calendar-icon-container {
    order: 2;
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.75rem;
}

/* Zero-size spacer that forces a line-break wherever it's ordered to. An
   ordinary item with flex-basis:100% would do the same but then also fill
   the entire new line by itself (nothing else could share it); this one
   collapses back to zero width once wrapped, so whatever comes after it in
   `order` still shares that new line normally. Vertical spacing between the
   nav/icons line and the badge/info line below is NOT done via row-gap on
   the container -- this spacer would sit on its own flex line and make
   row-gap apply on both sides of it, doubling the gap versus a normal
   single-gap transition. Instead .sal-tempo-container/.sal-info-item carry
   their own margin-top, matching .sal-header-controls' margin-bottom so
   both inter-line gaps are equal. */
.sal-header-break {
    flex-basis: 100%;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    order: 3;
}

.sal-tempo-container {
    order: 4;
    flex-shrink: 0;
    margin-top: 1rem;
}

.sal-tempo-badge {
    display: inline-flex;
    align-items: center;
    height: 2.5rem;
    padding: 0 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Target white backgrounds */
    .sal-tempo-badge[style*="background-color:white"],
    .sal-tempo-badge[style*="background-color: white"],
    .sal-tempo-badge[style*="background-color:#ffffff"],
    .sal-tempo-badge[style*="background-color: #ffffff"],
    .sal-tempo-badge[style*="background-color:#fff"],
    .sal-tempo-badge[style*="background-color: #fff"],
    .sal-tempo-badge[style*="background-color:#FFFFFF"],
    .sal-tempo-badge[style*="background-color: #FFFFFF"] {
        color: #111827 !important;
        border-color: rgba(0, 0, 0, 0.12);
}

.sal-info-item {
    order: 5;
    margin-top: 1rem;
    font-weight: 500;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
}

.sal-calendar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 0 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.1rem;
    opacity: 0.7;
}

/* The calendario liturgico icon is a Font Awesome glyph, which scales with
   the button's own font-size; the piano-mode icon is a custom inline <svg>,
   which doesn't scale with font-size unless told to -- without this it stays
   whatever pixel size its width/height attributes say regardless of
   breakpoint, ending up visibly bigger than the FA icon on mobile once
   .sal-calendar-btn's font-size shrinks there. Sizing it in em keeps both
   icons in step at every breakpoint. */
.sal-calendar-svg-icon {
    width: 1em;
    height: 1em;
    display: block;
}

.sal-calendar-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.sal-events-section {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.sal-event-item {
    display: flex;
    align-items: center;
    height: 2.5rem;
    background: rgb(255, 255, 255);
    padding: 0 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.sal-vigil {
    font-style: italic;
    opacity: 0.8;
}


.sal-proprio-container {
    position: relative;
    display: inline-block;
    width: 30%;
    vertical-align: top;
    padding: 5px;
    box-sizing: border-box;
}

.sal-proprio-select {
    position: relative;
    width: 80%;
    font-size: 1.1em;
    font-weight: 500;
    margin-top: 5px;
    text-align: center;
}


.sal-celebra-come-container {
    position: relative;
    display: inline-block;
    width: 30%;
    vertical-align: top;
    padding: 5px;
    box-sizing: border-box;
}

.sal-celebra-come-select {
    position: relative;
    width: 50%;
    font-size: 1.1em;
    font-weight: 500;
    margin-top: 5px;
    text-align: center;
}

#impostazioni-avanzate-checkbox {
    margin-right: 8px;
}

#impostazioni-avanzate-container {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Bottom section */
.sal-bottom {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.salBottomHead {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Modern form controls */
.salBottomHead select {
    background: #ffffff;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: #212529;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    opacity: 0.8;
    cursor: default;
}

.salBottomHead select:focus {
    outline: none;
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Special green button for temp */
.temp-btn, #sal_contesto {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    border: 2px solid #16a34a !important;
    font-weight: 600 !important;
}

/* Content area */
.salTestoContainer {
    width: 100%;
    margin: 0;
    padding: 2rem;
    background: #ffffff;
    min-height: 400px;
    box-sizing: border-box;
    border-radius: 12px;
}

#salTesto {
    width: 100%;
    color: #212529;
}

.salResBlock {
    /*margin-bottom: 2.5rem;*/
    padding: 0.35rem 1.5rem;
    background: #ffffff;
    /*border-radius: 12px;
    /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.06);*/
}

.salResBlock .salResBlock {
    padding: 0;
}

.salResBlockTitle {
    font-size: 1.1rem;
    font-weight: 700;
    color: #aa232a;
    margin-top: 8px !important;
    /*margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 0px solid rgba(0, 0, 0, 0.1);*/
}

.salResBlockBody {
    color: #374151;
    line-height: 1.3;
}

.salTextBlock {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: #212529;
}

.salTextBody {
    line-height: 1.3;
    margin-bottom: 0rem;
    color: #374151;
}

.salTextCapo {
    min-width: 16px;
    min-height: 16px;
    margin-right: 12px;
    display: inline-block;
    vertical-align: middle;
}

.salTextCapoRosso {
    color: #aa232a;
}

.salTextCapoRossoBold {
    color: #aa232a;
    font-weight: 700;
}

.salTextEnd {
    min-width: 14px;
    min-height: 14px;
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
    font-size: 1.3em;
    line-height: 1;
}

.salmoTab2 {
    margin-left: 1em;
}

.salAntifona {
    position: relative;
    display: inline-block;
    width: 6%;
    color: #aa232a;
    vertical-align: top;
    font-weight: 500;
    font-size: 1rem;
    margin-right: 0;
    box-sizing: border-box;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;    
}

.salAntifona2 {
    display: inline-block;
    width: 92%;
    vertical-align: top;
    color: #374151;
    font-weight: 400;
    font-size: 1.1rem;
    margin-left: 0;
}

.sal-oppure {
    color: #aa232a;
}

/* Calendar styles */
.litcal_line {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.9rem;
    color: #6b7280;
    padding: 0.5rem 0;
}

.litcal_line_container {
    margin: 0.75rem 0;
    width: 100%;
    display: flex;
    align-items: flex-start;
}

.litcal_line_container > div {
    padding: 0.5rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.02);
}

.litcal-date-col {
    flex: 0 0 108px;
    cursor: pointer;
    padding: 4px;
    box-sizing: border-box;
}

.litcal-day-col {
    flex: 0 0 80px;
}

.litcal-event-col {
    flex: 1;
    min-width: 0;
}

/* Navigation buttons*/
button, .btn, input[type="button"] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid rgba(0, 0, 0, 0.1);
    color: #6b7280;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    font-weight: 500;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    cursor: default;
    opacity: 0.7;
}

button.active, .btn.active {
    background: linear-gradient(135deg, #000000 0%, #374151 100%);
    color: #ffffff;
    border-color: #000000;
    opacity: 1;
}

/* Inno and Beata Tabs */
.inno-tab-container,
.beata-tab-container,
.bvm-lang-tab-container {
    display: inline-flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0;
    justify-content: flex-start;
    align-items: stretch;
    margin-top: 10px;
    margin-bottom: 14px;
    border: 1px solid #c3c3c3;
    border-radius: 10px;
    background-color: #f1f1f1;
    max-width: 100%;
}

.inno-tab,
.beata-tab,
.bvm-lang-tab {
    background-color: transparent;
    border-right: 1px solid #c3c3c3;
    color: #2f2f2f;
    padding: 0.6rem 0.95rem;
    font-weight: 500;
    font-size: 0.88rem;
    line-height: 1.2;
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    box-shadow: none;
}

.inno-tab:last-child,
.beata-tab:last-child,
.bvm-lang-tab:last-child {
    border-right: 0;
}

.inno-tab:hover,
.beata-tab:hover,
.bvm-lang-tab:hover {
    background-color: #e3e3e3;
}

.inno-tab.active,
.beata-tab.active,
.bvm-lang-tab.active {
    background-color: #2f2f2f;
    color: #ffffff;
}

.bvm-lang-tab-container {
    margin-bottom: 8px;
}

.pn-lang-tab-container {
    display: inline-flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0;
    justify-content: flex-start;
    align-items: stretch;
    margin-top: 10px;
    margin-bottom: 14px;
    border: 1px solid #c3c3c3;
    border-radius: 10px;
    background-color: #f1f1f1;
    max-width: 100%;
}

.pn-lang-tab {
    background-color: transparent;
    border-right: 1px solid #c3c3c3;
    color: #2f2f2f;
    padding: 0.6rem 0.95rem;
    font-weight: 500;
    font-size: 0.88rem;
    line-height: 1.2;
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    box-shadow: none;
}

.pn-lang-tab:last-child {
    border-right: 0;
}

.pn-lang-tab:hover {
    background-color: #e3e3e3;
}

.pn-lang-tab.active {
    background-color: #2f2f2f;
    color: #ffffff;
}

.pn-lang-tab-container {
    margin-bottom: 8px;
}

/* Dropdown wrapper (select-style box on mobile) */
.sal-dropdown {
    position: relative;
    display: block;
}

/* Trigger is hidden on desktop: tabs are shown inline as a row */
.sal-dropdown-trigger {
    display: none;
}

.sal-dropdown .sal-dropdown-placeholder {
    display: inline;
}
.sal-dropdown .sal-dropdown-label {
    display: none;
}
.sal-dropdown .sal-dropdown-placeholder,
.sal-dropdown .sal-dropdown-label,
.sal-dropdown .sal-dropdown-arrow {
    pointer-events: none;
}

/* Tablet styles */
@media screen and (max-width: 1024px) {
    #salmain {
        width: 98%;
        padding: 1.5rem;
        margin: 0.5rem auto;
    }
    
    .sal-error-note {
        top: 1rem;
        right: 1.5rem;
        font-size: 0.75rem;
    }

    .sal-header {
        padding: 1.25rem 1.5rem;
        border-radius: 12px;
    }
    
    .sal-header-title {
        font-size: 1.3rem;
    }
    
    .sal-header-controls {
        column-gap: 1rem;
    }

    .salBottomHead {
        padding: 1.25rem 1.5rem;
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .salBottomHead select {
        width: 100%;
    }
    
    .salTestoContainer {
        padding: 1.5rem;
    }
}

/* Mobile styles */
@media screen and (max-width: 768px) {
    /* Tabs become collapsible select-style dropdowns on phones */
    .sal-dropdown {
        margin-top: 10px;
        margin-bottom: 14px;
        max-width: 100%;
    }

    .sal-dropdown-trigger {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding: 0.7rem 0.95rem;
        border: 1px solid #c3c3c3;
        border-radius: 10px;
        background-color: #f1f1f1;
        color: #2f2f2f;
        font-weight: 500;
        font-size: 0.95rem;
        line-height: 1.2;
        cursor: pointer;
    }

    .sal-dropdown-trigger .sal-dropdown-placeholder {
        color: #6b6b6b;
    }

    .sal-dropdown-arrow {
        flex: 0 0 auto;
        font-size: 0.8rem;
        transition: transform 0.2s ease;
    }

    .sal-dropdown.open .sal-dropdown-trigger {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .sal-dropdown.open .sal-dropdown-arrow {
        transform: rotate(180deg);
    }

    /* Hide the list of options until the box is opened */
    .sal-dropdown .inno-tab-container,
    .sal-dropdown .beata-tab-container,
    .sal-dropdown .bvm-lang-tab-container,
    .sal-dropdown .pn-lang-tab-container {
        display: none;
    }

    .sal-dropdown.open .inno-tab-container,
    .sal-dropdown.open .beata-tab-container,
    .sal-dropdown.open .bvm-lang-tab-container,
    .sal-dropdown.open .pn-lang-tab-container {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        z-index: 50;
        margin: 0;
        border: 1px solid #c3c3c3;
        border-top: 0;
        border-radius: 0 0 10px 10px;
        background-color: #ffffff;
        max-height: 60vh;
        overflow-y: auto;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }

    .inno-tab,
    .beata-tab,
    .bvm-lang-tab,
    .pn-lang-tab {
        white-space: normal;
        border-right: 0;
        border-bottom: 1px solid #e2e2e2;
        flex: 1 1 auto;
    }

    .inno-tab:last-child,
    .beata-tab:last-child,
    .bvm-lang-tab:last-child,
    .pn-lang-tab:last-child {
        border-bottom: 0;
    }

    /* ≤3 options: always show as a tab row, never collapse to dropdown */
    .sal-dropdown.sal-tabs-only .sal-dropdown-trigger {
        display: none;
    }
    .sal-dropdown.sal-tabs-only .inno-tab-container,
    .sal-dropdown.sal-tabs-only .beata-tab-container,
    .sal-dropdown.sal-tabs-only .bvm-lang-tab-container,
    .sal-dropdown.sal-tabs-only .pn-lang-tab-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        position: static;
        width: 100%;
        border: 1px solid #c3c3c3;
        border-radius: 10px;
        box-shadow: none;
        max-height: none;
        overflow: hidden;
    }
    .sal-dropdown.sal-tabs-only .inno-tab,
    .sal-dropdown.sal-tabs-only .beata-tab,
    .sal-dropdown.sal-tabs-only .bvm-lang-tab,
    .sal-dropdown.sal-tabs-only .pn-lang-tab {
        white-space: normal;
        border-right: 1px solid #c3c3c3;
        border-bottom: 1px solid #c3c3c3;
        flex: 1 1 auto;
        text-align: center;
    }
    .sal-dropdown.sal-tabs-only .inno-tab:last-child,
    .sal-dropdown.sal-tabs-only .beata-tab:last-child,
    .sal-dropdown.sal-tabs-only .bvm-lang-tab:last-child,
    .sal-dropdown.sal-tabs-only .pn-lang-tab:last-child {
        border-right: 0;
    }

    html {
        font-size: calc(14px * var(--font-scale));
    }
    
    body {
        background: #ffffff;
    }
    
    #salmain {
        width: 100%;
        margin: 0;
        padding: 1rem;
        border-radius: 0;
        box-shadow: none;
        border: none;
    }
    
    .sal-error-note {
        position: relative;
        top: auto;
        right: auto;
        margin-top: 1rem;
        text-align: center;
        width: 100%;
    }
    
    .sal-header {
        padding: 1rem;
        border-radius: 12px;
        margin-bottom: 1.5rem;
    }
    
    
    .sal-header-title {
        font-size: 1.1rem;
        line-height: 1.3;
    }
    
    /* Phones only: nav alone on its own line (its prev/next arrows are
       fixed-size images that need the full row width, so they can't share a
       line with anything else without getting squeezed/hidden) -- badge,
       Anno/giorno/settimana and the piano/calendario buttons move onto the
       next line(s) together, wrapping naturally onto as many lines as
       needed rather than being clipped or scrolled out of view. */
    .sal-header-controls {
        column-gap: 0.75rem;
    }

    .sal-header-break {
        order: 2;
    }

    .sal-tempo-container {
        order: 3;
        margin-top: 0.6rem;
    }

    .sal-info-item {
        order: 4;
        margin-top: 0.6rem;
        font-size: 0.85rem;
    }

    .sal-calendar-icon-container {
        order: 5;
        margin-top: 0.6rem;
        gap: 0.4rem;
    }

    .sal-calendar-text {
        display: none;
    }

    .sal-tempo-badge {
        padding: 0 1rem;
        font-size: 0.85rem;
        text-align: center;
    }

    .sal-events-section {
        gap: 0.5rem;
    }

    .sal-event-item {
        font-size: 0.8rem;
        padding: 0 0.8rem;
    }
    
    .salBottomHead {
        padding: 1rem;
        gap: 0.75rem;
    }
    
    .salBottomHead select {
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
        border-radius: 10px;
    }
    
    .salBottomHead > div:nth-child(1) { /* This selector targets the first div child of .salBottomHead */
        width: 100% !important;
        box-sizing: border-box;
    }

    .salBottomHead > div:nth-child(2) { /* This selector targets the second div child of .salBottomHead */
        width: 100% !important;
        box-sizing: border-box;
    }

   /* .salBottomHead > div:nth-child(4) { /* This selector targets the second div child of .salBottomHead 
        display: none;
        padding: 0;
        max-height: 0px; /* Or any other value you need 
        overflow-y: auto; /* Often useful when content exceeds max-height 
    }

    .salBottomHead > div:nth-child(5) { /* This selector targets the second div child of .salBottomHead 
        display: none;
        padding: 0;
        max-height: 0px; /* Or any other value you need 
        overflow-y: auto; /* Often useful when content exceeds max-height 
    }
*/
    .sal-calendar-btn {
        padding: 0 1rem;
        font-size: 0.9rem;
        border-radius: 8px;
    }

    .litcal_line {
        font-size: 0.85rem;
    }

    .litcal_line_container {
        margin: 0.5rem 0;
    }

    .litcal-date-col {
        flex: 0 0 95px;
    }

    .litcal-day-col {
        flex: 0 0 70px;
    }

    .salTestoContainer {
        padding: 1rem;
    }
    
    .salResBlock {
        padding: 0.35rem 1rem;
        margin-bottom: 0.5rem;
        border-radius: 10px;
    }

    .salResBlockTitle {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }
    
    .salTextBlock {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    
    .salAntifona {
        width: 15%;
        font-size: 0.85rem;
    }
    
    .salAntifona2 {
        width: 85%;
        font-size: 1rem;
    }
    
    button, .btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
        border-radius: 10px;
    }
}

/* Extra small mobile */
@media screen and (max-width: 480px) {

    .litcal-date-col {
        flex: 0 0 88px;
    }

    .litcal-day-col {
        flex: 0 0 60px;
    }

    .sal-error-note {
        font-size: 0.7rem;
    }

    .sal-header-title {
        font-size: 1rem;
    }
    
    .sal-header-controls {
        column-gap: 0.5rem;
    }

    .sal-tempo-container,
    .sal-info-item,
    .sal-calendar-icon-container {
        margin-top: 0.5rem;
    }

    .salAntifona {
        width: 20%;
    }
    
    .salAntifona2 {
        width: 80%;
        font-size: 0.95rem;
    }
    
    .salResBlockTitle {
        font-size: 1.1rem;
    }
    
    .salTextBlock {
        font-size: 0.95rem;
    }
}


/* Print styles */
@media print {
    body {
        background: white;
        color: black;
    }
    
    #salmain {
        box-shadow: none;
        border: none;
    }
    
    .sal-header {
        background: white;
        color: black;
        box-shadow: none;
        border: 1px solid black;
    }
    
    button, .btn {
        display: none;
    }
}

/* ============================================
   PIANO MODE STYLES
   ============================================ */
/* Piano View Layout */
/* Icon toolbar (play-all / piano-mode buttons) */
.sal-icon-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0;
}

.sal-fontsize-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f8f9fa;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 0.45rem 0.75rem;
}

.sal-fontsize-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
    margin-right: 0.15rem;
}

.sal-fontsize-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.75rem;
    background: linear-gradient(135deg, #000000 0%, #333333 100%);
    border: none;
    color: #ffffff;
    padding: 0 0.65rem;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.sal-fontsize-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.sal-fontsize-btn.sal-fontsize-reset {
    font-size: 0.75rem;
    opacity: 0.75;
}

.sal-icon-btn {
    /* Matched to .sal-fontsize-control's rendered height (padding + its
       buttons) so the play button doesn't dwarf the A-/A/A+ controls next
       to it in .sal-icon-toolbar. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #000000 0%, #333333 100%);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sal-icon-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.sal-icon-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Overlay */
#piano-view {
    display: none;
    position: fixed;
    inset: 0;
    background: white;
    z-index: 999999;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}

#piano-view.active {
    display: flex;
}

/* Main area: columns + tap zones */
#piano-main {
    position: relative;
    flex: 1;
}

/* Paged text */
#piano-page-container {
    height: 100%;
    padding: 40px 0;
    box-sizing: border-box;

    /* column-width/column-gap are set from JS (PianoMode.recalculatePages) using the
       container's actual clientWidth, so each page-worth of columns lines up exactly
       with the clientWidth-sized scroll jumps in PianoMode.goPage. Doing this in pure
       CSS with vw-based math drifted out of alignment after a couple of pages because
       the container's horizontal padding is only "spent" once (at the very start/end
       of the scroll track), not once per page. */
    column-fill: auto;

    overflow-y: hidden !important;
    overflow-x: auto;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

#piano-page-container > * {
    scroll-snap-align: start;
    font-size: 1.4em;
    line-height: 1.6;
    margin-bottom: 1.2em;
    padding: 0 50px;
    box-sizing: border-box;
}

/* Keep-together applies to individual stanzas/headings/antiphons, not to the
   whole top-level block (e.g. an entire Notturno with several psalms), which
   is far taller than a column and was silently losing content at the column
   break when the browser tried (and failed) to honor "avoid" on something
   that could never fit in one column. */
#piano-page-container .salTextBlock,
#piano-page-container .salResBlockTitle,
#piano-page-container .salAntifona,
#piano-page-container .salAntifona2 {
    break-inside: avoid-column;
}

/* Tap zones for page turning */
#piano-tap-left,
#piano-tap-right {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    z-index: 999998; /* above text, below toolbar */
}

/* optional debug colors: */
/*
#piano-tap-left { background: rgba(255,0,0,0.1); }
#piano-tap-right { background: rgba(0,0,255,0.1); }
*/

#piano-tap-left  { left: 0;  }
#piano-tap-right { right: 0; }

/* Toolbar with Esci button */
#piano-toolbar {
    height: 70px;
    background: #f8f8f8;
    border-top: 2px solid #eee;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    z-index: 1000000;
}

#piano-toolbar button {
    padding: 10px 18px;
    font-size: 16px;
    border-radius: 6px;
    border: 1px solid #bbb;
    background: white;
}

/* Zona centrale: indicatore di pagina + Esci, lontani dai bordi dove si tocca
   per Indietro/Avanti, così Esci non si preme per sbaglio durante la lettura. */
#piano-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

#piano-indicator {
    text-align: center;
    font-weight: bold;
}

/* Specificità #piano-toolbar + ID: senza, "#piano-toolbar button" (ID+elemento,
   più specifico di un singolo ID) vincerebbe su background/padding/font-size
   qui sotto, lasciando il testo illeggibile (es. bianco su bianco). */
#piano-toolbar #piano-exit {
    padding: 4px 14px;
    font-size: 13px;
    background: #ffeded;
    color: #d32f2f;
    border-color: #d32f2f;
}

/* Avanti è il pulsante più usato durante la lettura: più largo e ben visibile. */
#piano-toolbar #piano-next {
    flex: 0 0 auto;
    min-width: 140px;
    font-weight: bold;
    background: #1a1a1a;
    color: white;
    border-color: #1a1a1a;
}