/* Library shelf — liturgical-year browse. Ported from the design system's
 * library-shelf preview; reads the .h2h-program --program-* theme tokens. */
.sh-head { border-bottom: 1px solid var(--gold-soft); background: linear-gradient(180deg, var(--program-structure-wash), var(--page)); }
.sh-head__inner { max-width: 78rem; margin: 0 auto; padding: var(--sp-7) var(--sp-6) var(--sp-6); }
.sh-eyebrow { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-3); }
.sh-eyebrow span { width: 1.6rem; height: 3px; background: var(--gold); border-radius: 2px; }
.sh-eyebrow p { margin: 0; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.sh-head h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0 0 var(--sp-3); }
.sh-head h1 em { font-style: italic; color: var(--program-structure); font-weight: 400; }
.sh-head__lead { font-size: var(--text-lg); color: var(--ink-soft); max-width: 42rem; margin: 0 0 var(--sp-5); }
.sh-head__meta { display: flex; gap: var(--sp-5); flex-wrap: wrap; font-size: var(--text-sm); color: var(--ink-soft); }
.sh-head__meta b { color: var(--program-accent); font-family: var(--font-serif); font-weight: 700; }

.sh-controls { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.sh-controls__inner { max-width: 78rem; margin: 0 auto; padding: var(--sp-4) var(--sp-6); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }
.sh-cycle { display: inline-flex; align-items: center; gap: var(--sp-3); }
.sh-cycle__label { font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); }
.sh-seg { display: inline-flex; background: var(--mist); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.sh-seg a { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); text-decoration: none; padding: .45rem 1.1rem; border-radius: 999px; line-height: 1; text-align: center; }
.sh-seg a .yr { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-top: 2px; }
.sh-seg a[aria-current="true"] { background: var(--program-structure); color: #fff; box-shadow: var(--shadow); }
.sh-jump { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.sh-jump a { font-size: var(--text-sm); font-weight: 600; color: var(--program-structure); text-decoration: none; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--gold-soft); }
.sh-jump a:hover { background: var(--program-structure-wash); }

.sh-wrap { max-width: 78rem; margin: 0 auto; padding: 0 var(--sp-6); }
.sh-season { padding: var(--sp-7) 0 0; }
.sh-season__head { display: flex; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-2); }
.sh-season__band { width: .5rem; align-self: stretch; border-radius: 3px; }
.sh-season__title { font-size: var(--text-2xl); margin: 0; }
.sh-season__title em { font-style: italic; font-weight: 400; }
.sh-season__n { font-size: var(--text-sm); color: var(--ink-soft); font-weight: 600; }
.sh-season--advent .sh-season__band { background: #5b3d8a; } .sh-season--advent .sh-season__title em { color: #5b3d8a; }
.sh-season--christmas .sh-season__band { background: var(--gold); } .sh-season--christmas .sh-season__title em { color: var(--gold-deep); }
.sh-season--lent .sh-season__band { background: #6b2d6b; } .sh-season--lent .sh-season__title em { color: #6b2d6b; }
.sh-season--easter .sh-season__band { background: var(--crimson); } .sh-season--easter .sh-season__title em { color: var(--crimson); }
.sh-season--ordinary .sh-season__band { background: var(--navy); } .sh-season--ordinary .sh-season__title em { color: var(--navy); }

.sh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-4); }
.sh-card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow 140ms, transform 140ms; }
.sh-card--available:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.sh-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) 0; }
.sh-card__sunday { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); }
.sh-card__body { padding: var(--sp-2) var(--sp-4) var(--sp-4); flex: 1; display: flex; flex-direction: column; }
.sh-card__feast { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-soft); margin: 0 0 var(--sp-1); }
.sh-card__title { font-family: var(--font-serif); font-weight: 700; font-size: var(--text-lg); margin: 0 0 var(--sp-2); line-height: 1.3; }
.sh-card__cite { font-size: var(--text-sm); color: var(--program-structure); font-weight: 600; margin-top: auto; }
.sh-card__foot { border-top: 1px solid var(--line); padding: .7rem var(--sp-4); display: flex; align-items: center; gap: .5rem; font-size: var(--text-sm); color: var(--ink-soft); }
.sh-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px; }
.sh-chip--watched { background: var(--program-structure-wash); color: var(--program-structure); }
.sh-chip--fill { background: var(--program-accent-wash); color: var(--program-accent); }

.sh-empty { border: 1px dashed var(--gold); background: linear-gradient(180deg, var(--mist), var(--page)); border-radius: var(--radius-lg); padding: var(--sp-4); display: flex; flex-direction: column; }
.sh-empty__top { display: flex; align-items: center; justify-content: space-between; }
.sh-empty__sunday { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); }
.sh-empty__label { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.sh-empty__feast { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-soft); margin: var(--sp-2) 0 0; }
.sh-empty__msg { font-family: var(--font-serif); font-style: italic; font-size: var(--text-base); color: var(--ink); margin: var(--sp-2) 0; line-height: 1.45; }
.sh-empty__near { margin-top: auto; background: var(--card); border: 1px solid var(--gold-soft); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.sh-empty__near .lbl { font-size: var(--text-sm); color: var(--ink-soft); }
.sh-empty__near a { font-weight: 700; color: var(--program-structure); text-decoration: none; }

.sh-footer { max-width: 78rem; margin: var(--sp-8) auto 0; padding: var(--sp-6); border-top: 1px solid var(--line); font-size: var(--text-sm); color: var(--ink-soft); }

@media (max-width: 840px) { .sh-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sh-grid { grid-template-columns: 1fr; } }