/* ============================================================
   Supreme Science · Library (Granthālaya)
   The resource hub — Library home + Library Browse (the stacks).

   Everything is scoped under `.lib-page`, which also carries the design
   tokens (mirroring how the Events page scopes its palette under `.ev-page`).
   Ported from the design handoff `library.css` + the tokens the Library needs
   from the design system. Light-only, per the handoff.
   ============================================================ */

.lib-page {
  --bg: #F3EEE4; --bg-warm: #EFE7D9; --bg-card: #F7F2E9; --paper-edge: #E4DBC9;
  /* The shared top-nav dropdown reads var(--paper) for its surface; give it the
     library's raised-card cream so it isn't transparent on /classroom. */
  --paper: #F7F2E9;
  --ink: #4A4136; --ink-soft: #6E6557; --muted: #968C7D; --muted-2: #B2A998;
  --rule: #DCD3C2; --rule-soft: #E7DFD0;
  --gold: #B0892E; --gold-deep: #8E6E20; --gold-soft: #C6A64F; --alert: #BC5E34;
  --serif: "EB Garamond", Georgia, serif;
  --display: "Cormorant Garamond", "EB Garamond", serif;
  background: var(--bg); color: var(--ink);
  font-family: var(--serif); font-size: 18px; line-height: 1.5;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

.lib-page .lpage { max-width: 880px; margin: 0 auto; padding: 0 40px 96px; flex: 1; width: 100%; }
.lib-page .bpage { max-width: 880px; margin: 0 auto; padding: 0 40px 96px; flex: 1; width: 100%; }

/* ---- hero ---- */
.lib-page .lhero { text-align: center; padding: 64px 0 6px; }
.lib-page .lhero__num { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 15px; letter-spacing: .18em; color: var(--gold); text-transform: uppercase; }
.lib-page .lhero__title { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 48px; line-height: 1.04; color: var(--ink); margin: 8px 0 0; }
.lib-page .lhero__lede { font-style: italic; color: var(--ink-soft); font-size: 18px; max-width: 520px; margin: 16px auto 0; line-height: 1.5; text-wrap: pretty; }

/* room label */
.lib-page .room-tag { display: flex; align-items: center; gap: 14px; max-width: 660px; margin: 46px auto 0; font-family: "EB Garamond", serif; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.lib-page .room-tag::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* ---- continue / resume strip ---- */
.lib-page .resume { margin: 48px auto 0; max-width: 660px; }
.lib-page .resume__label { display: flex; align-items: center; gap: 14px; font-family: "EB Garamond", serif; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.lib-page .resume__label::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.lib-page .resume__row { display: flex; gap: 16px; flex-wrap: wrap; }
.lib-page .rcard { flex: 1 1 300px; max-width: 430px; display: flex; gap: 15px; align-items: center; background: var(--bg-card); border: 1px solid var(--paper-edge); border-radius: 13px; padding: 15px 17px; cursor: pointer; text-align: left; font: inherit; color: inherit; box-shadow: 0 1px 0 rgba(74,65,54,.03), 0 12px 30px -26px rgba(74,65,54,.5); transition: box-shadow .2s, border-color .2s; }
.lib-page .rcard:hover { border-color: var(--gold-soft); box-shadow: 0 1px 0 rgba(74,65,54,.03), 0 16px 34px -24px rgba(74,65,54,.55); }
.lib-page .rcard__glyph { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule); }
.lib-page .rcard__body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.lib-page .rcard__form, .lib-page .rcard__title, .lib-page .rcard__by, .lib-page .rcard__bar, .lib-page .rcard__left { display: block; }
.lib-page .rcard__form { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.lib-page .rcard__title { font-family: "EB Garamond", serif; font-weight: 600; font-size: 18px; line-height: 1.15; color: var(--ink); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-page .rcard__by { font-style: italic; font-size: 13px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-page .rcard__bar { height: 3px; border-radius: 3px; background: var(--rule); margin-top: 11px; overflow: hidden; }
.lib-page .rcard__fill { display: block; height: 100%; border-radius: 3px; background: var(--gold); }
.lib-page .rcard__left { font-style: italic; font-size: 13px; color: var(--gold-deep); margin-top: 8px; }

/* ---- featured ---- */
.lib-page .feat { margin: 30px auto 0; max-width: 660px; background: var(--bg-card); border: 1px solid var(--paper-edge); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 0 rgba(74,65,54,.03), 0 18px 40px -28px rgba(74,65,54,.45); display: grid; grid-template-columns: 236px 1fr; }
.lib-page .feat__plate { position: relative; background: radial-gradient(circle at 50% 42%, #efe2c6 0%, #e7d8b6 38%, #d9c79f 100%); display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; }
.lib-page .feat__rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .55; }
.lib-page .feat__rings svg { width: 188px; height: 188px; }
.lib-page .feat__play { position: relative; width: 62px; height: 62px; border-radius: 50%; background: rgba(247,242,233,.92); border: 1px solid var(--paper-edge); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px -12px rgba(74,65,54,.55); transition: transform .2s; }
.lib-page .feat__plate:hover .feat__play { transform: scale(1.06); }
.lib-page .feat__play .tri { width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--gold-deep); margin-left: 4px; }
.lib-page .feat__dur { position: absolute; left: 14px; bottom: 13px; font-size: 12px; letter-spacing: .04em; color: var(--ink-soft); background: rgba(247,242,233,.82); border: 1px solid var(--paper-edge); border-radius: 100px; padding: 3px 11px; }
.lib-page .feat__body { padding: 28px 30px 30px; }
.lib-page .feat__eyebrow { display: flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 11px; }
.lib-page .feat__eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.lib-page .feat__title { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 33px; line-height: 1.04; color: var(--ink); margin: 0; }
.lib-page .feat__meta { font-style: italic; color: var(--ink-soft); font-size: 15px; margin: 8px 0 0; }
.lib-page .feat__desc { color: var(--ink-soft); font-size: 16px; line-height: 1.55; margin: 12px 0 0; text-wrap: pretty; }
.lib-page .feat__foot { display: flex; align-items: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.lib-page .feat__watch { font-family: "EB Garamond", serif; font-size: 16px; color: #fff; background: var(--gold); border: 1px solid var(--gold); border-radius: 100px; padding: 10px 26px; cursor: pointer; white-space: nowrap; transition: background .2s, box-shadow .2s; }
.lib-page .feat__watch:hover { background: var(--gold-deep); box-shadow: 0 6px 18px -10px rgba(176,137,46,.7); }
.lib-page .feat__save { background: none; border: 0; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; font-style: italic; font-size: 14px; font-family: "EB Garamond", serif; padding: 6px; transition: color .2s; }
.lib-page .feat__save:hover, .lib-page .feat__save.is-saved { color: var(--gold-deep); }
@media (max-width: 600px) { .lib-page .feat { grid-template-columns: 1fr; } .lib-page .feat__plate { height: 170px; } }

/* ---- begin-here path ---- */
.lib-page .path-head { max-width: 660px; margin: 24px auto 0; text-align: center; }
.lib-page .path-head__eyebrow { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-deep); }
.lib-page .path-head__title { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 23px; color: var(--ink); margin-top: 4px; }
.lib-page .path { max-width: 660px; margin: 16px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lib-page .pcard { position: relative; display: flex; flex-direction: column; gap: 3px; text-align: left; background: none; border: 1px solid var(--rule); border-radius: 13px; padding: 18px 18px 16px; cursor: pointer; font: inherit; color: inherit; transition: border-color .2s, background .2s; }
.lib-page .pcard:hover { border-color: var(--gold-soft); background: rgba(255,255,255,.4); }
.lib-page .pcard.is-flash { background: rgba(176,137,46,.1); }
.lib-page .pcard__n { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 15px; color: var(--gold); letter-spacing: .06em; }
.lib-page .pcard__glyph { position: absolute; top: 16px; right: 16px; }
.lib-page .pcard__form { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.lib-page .pcard__title { font-family: "EB Garamond", serif; font-weight: 600; font-size: 19px; line-height: 1.16; color: var(--ink); margin-top: 4px; }
.lib-page .pcard__by { font-style: italic; font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.lib-page .pcard__go { font-style: italic; font-size: 14px; color: var(--gold-deep); margin-top: 12px; }
.lib-page .pcard__done { font-style: italic; font-size: 14px; color: var(--muted); margin-top: 12px; }
.lib-page .pcard.is-done .pcard__title { color: var(--muted); }
@media (max-width: 600px) { .lib-page .path { grid-template-columns: 1fr; } .lib-page .pcard__glyph { top: 18px; } }

/* ---- section heads ---- */
.lib-page .section-head { max-width: 880px; margin: 64px auto 0; text-align: center; }
.lib-page .section-head__eyebrow { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 15px; letter-spacing: .18em; color: var(--gold); text-transform: uppercase; }
.lib-page .section-head__title { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 34px; color: var(--ink); margin: 6px 0 0; }
.lib-page .section-head__lede { font-style: italic; color: var(--ink-soft); font-size: 17px; max-width: 460px; margin: 12px auto 0; line-height: 1.5; text-wrap: pretty; }

/* ---- home CTA into the stacks ---- */
.lib-page .home-cta { max-width: 660px; margin: 46px auto 0; text-align: center; }
.lib-page .home-cta__btn { display: inline-flex; align-items: center; gap: 11px; font-family: "EB Garamond", serif; font-size: 17px; color: var(--ink); background: var(--bg-card); border: 1px solid var(--paper-edge); border-radius: 100px; padding: 14px 32px; text-decoration: none; box-shadow: 0 1px 0 rgba(74,65,54,.03), 0 14px 30px -24px rgba(74,65,54,.5); transition: border-color .2s, box-shadow .2s, color .2s; }
.lib-page .home-cta__btn:hover { border-color: var(--gold-soft); color: var(--gold-deep); box-shadow: 0 1px 0 rgba(74,65,54,.03), 0 18px 36px -22px rgba(74,65,54,.55); }
.lib-page .home-cta__btn .arr { font-size: 18px; }
.lib-page .home-cta__sub { display: block; font-style: italic; color: var(--muted); font-size: 14px; margin-top: 13px; letter-spacing: .02em; }

/* ---- browse page header ---- */
.lib-page .bback { display: inline-flex; align-items: center; gap: 8px; font-family: "EB Garamond", serif; font-style: italic; font-size: 15px; color: var(--muted); text-decoration: none; margin-top: 30px; transition: color .2s; }
.lib-page .bback:hover { color: var(--gold-deep); }
.lib-page .bhead { text-align: center; margin-top: 14px; }
.lib-page .bhead__eyebrow { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 15px; letter-spacing: .18em; color: var(--gold); text-transform: uppercase; }
.lib-page .bhead__title { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 44px; color: var(--ink); margin: 6px 0 0; }
.lib-page .bhead__lede { font-style: italic; color: var(--ink-soft); font-size: 17px; max-width: 460px; margin: 12px auto 0; line-height: 1.5; text-wrap: pretty; }

.lib-page .scale { display: flex; justify-content: center; gap: 0; margin: 18px auto 0; font-family: "EB Garamond", serif; font-size: 13px; letter-spacing: .06em; color: var(--muted); }
.lib-page .scale span { padding: 0 16px; }
.lib-page .scale span + span { border-left: 1px solid var(--rule); }
.lib-page .scale b { font-weight: 600; color: var(--gold-deep); font-variant-numeric: tabular-nums; }

/* pull a thread */
.lib-page .archive { max-width: 680px; margin: 34px auto 0; }
.lib-page .archive__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 11px; }
.lib-page .archive__eyebrow { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.lib-page .archive__reroll { font-family: "EB Garamond", serif; font-style: italic; font-size: 14px; color: var(--gold-deep); background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px; white-space: nowrap; transition: color .2s; }
.lib-page .archive__reroll:hover { color: var(--gold); }
.lib-page .archive__reroll .sym { font-style: normal; font-size: 15px; }
.lib-page .archive__card { display: flex; gap: 18px; align-items: center; background: var(--bg-card); border: 1px solid var(--paper-edge); border-radius: 14px; padding: 20px 24px; cursor: pointer; box-shadow: 0 1px 0 rgba(74,65,54,.03), 0 14px 32px -28px rgba(74,65,54,.5); transition: opacity .18s ease, border-color .2s; }
.lib-page .archive__card:hover { border-color: var(--gold-soft); }
.lib-page .archive__card.is-rolling { opacity: 0; }
.lib-page .archive__glyph { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; }
.lib-page .archive__form { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; }
.lib-page .archive__title { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 27px; line-height: 1.05; color: var(--ink); margin: 3px 0 0; }
.lib-page .archive__meta { font-style: italic; color: var(--muted); font-size: 14px; margin: 4px 0 0; }
.lib-page .archive__desc { color: var(--ink-soft); font-size: 15px; line-height: 1.5; margin: 8px 0 0; text-wrap: pretty; }

/* browse bar */
.lib-page .browse { max-width: 780px; margin: 40px auto 0; }
.lib-page .search { position: relative; }
.lib-page .search input { width: 100%; font-family: "EB Garamond", serif; font-size: 18px; color: var(--ink); background: var(--bg-card); border: 1px solid var(--paper-edge); border-radius: 100px; padding: 13px 22px 13px 46px; outline: none; transition: border-color .2s, box-shadow .2s; }
.lib-page .search input::placeholder { color: var(--muted-2); font-style: italic; }
.lib-page .search input:focus { border-color: var(--gold-soft); box-shadow: 0 0 0 3px rgba(198,166,79,.14); }
.lib-page .search__icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }

.lib-page .facets { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.lib-page .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.lib-page .chip { font-family: "EB Garamond", serif; font-size: 14.5px; color: var(--ink-soft); background: none; border: 1px solid var(--rule); border-radius: 100px; padding: 6px 15px; cursor: pointer; transition: border-color .2s, color .2s, background .2s; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.lib-page .chip:hover { border-color: var(--gold-soft); color: var(--gold-deep); }
.lib-page .chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg-card); }
.lib-page .chip__n { font-size: 12px; opacity: .6; font-variant-numeric: tabular-nums; }
.lib-page .chip--save.is-on { background: var(--gold); border-color: var(--gold); color: #fff; }

.lib-page .selects { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; justify-content: space-between; }
.lib-page .selects__group { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; flex-shrink: 0; }
.lib-page .sel { position: relative; display: inline-flex; align-items: center; }
.lib-page .sel select { -webkit-appearance: none; appearance: none; font-family: "EB Garamond", serif; font-size: 14px; color: var(--ink-soft); background: none; border: 1px solid var(--rule); border-radius: 100px; padding: 7px 30px 7px 16px; cursor: pointer; transition: border-color .2s, color .2s; }
.lib-page .sel select:hover { border-color: var(--gold-soft); color: var(--gold-deep); }
.lib-page .sel::after { content: "\25BE"; position: absolute; right: 13px; color: var(--muted); pointer-events: none; font-size: 11px; }
.lib-page .arrange-lab { font-style: italic; font-size: 14px; color: var(--muted); white-space: nowrap; }
.lib-page .result-count { font-style: italic; font-size: 14px; color: var(--muted); white-space: nowrap; margin-right: 8px; }
/* Mobile: the filter-select groups carried flex-shrink:0, so the row kept its
   full max-content width and overflowed the viewport (right-side whitespace +
   side-scroll). Let the groups shrink so their selects wrap within the page. */
@media (max-width: 600px) {
  .lib-page .selects { justify-content: flex-start; }
  .lib-page .selects__group { flex-shrink: 1; min-width: 0; }
  .lib-page .lpage { padding-left: 22px; padding-right: 22px; }
}

/* view toggle (covers / index) */
.lib-page .vbar { display: flex; align-items: center; justify-content: flex-end; gap: 14px; max-width: 880px; margin: 22px auto 0; }
.lib-page .vtoggle { display: inline-flex; border: 1px solid var(--rule); border-radius: 100px; overflow: hidden; }
.lib-page .vtoggle button { font-family: "EB Garamond", serif; font-size: 14px; color: var(--ink-soft); background: none; border: 0; padding: 8px 17px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background .2s, color .2s; }
.lib-page .vtoggle button + button { border-left: 1px solid var(--rule); }
.lib-page .vtoggle button.is-on { background: rgba(176,137,46,.12); color: var(--gold-deep); }
.lib-page .vtoggle svg { display: block; }

/* dense catalog grid (index view) */
.lib-page .stacks { max-width: 880px; margin: 14px auto 0; }
.lib-page .grp { margin-top: 26px; }
.lib-page .grp__title { display: flex; align-items: baseline; gap: 13px; font-family: "EB Garamond", serif; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.lib-page .grp__title .sk { font-style: italic; letter-spacing: .02em; text-transform: none; font-size: 15px; color: var(--muted-2); }
.lib-page .grp__title .grp__n { font-size: 11px; color: var(--muted-2); letter-spacing: .08em; }
.lib-page .grp__title::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.lib-page .sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 30px; }
@media (max-width: 640px) { .lib-page .sgrid { grid-template-columns: 1fr; } }

.lib-page .scard { position: relative; display: flex; gap: 13px; align-items: flex-start; padding: 13px 12px 13px 6px; border-top: 1px solid var(--rule-soft); cursor: pointer; transition: background .25s; }
.lib-page .scard:hover { background: rgba(255,255,255,.5); }
.lib-page .scard.is-flash { background: rgba(176,137,46,.1); }
.lib-page .scard__glyph { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.lib-page .scard__body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.lib-page .scard__title { font-family: "EB Garamond", serif; font-weight: 600; font-size: 17px; line-height: 1.18; color: var(--ink); }
.lib-page .scard:hover .scard__title { color: var(--gold-deep); }
.lib-page .scard__meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.lib-page .scard__dosha { display: inline-block; margin-left: 8px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); border: 1px solid var(--gold-soft); border-radius: 100px; padding: 1px 7px; vertical-align: 1px; }
.lib-page .scard__bar { display: block; height: 2.5px; border-radius: 3px; background: var(--rule); margin-top: 8px; max-width: 160px; overflow: hidden; }
.lib-page .scard__bar i { display: block; height: 100%; background: var(--gold); border-radius: 3px; }
.lib-page .scard__save { flex: 0 0 auto; background: none; border: 0; cursor: pointer; color: var(--muted-2); padding: 2px; line-height: 0; opacity: 0; transition: opacity .2s, color .2s; }
.lib-page .scard:hover .scard__save { opacity: 1; }
.lib-page .scard__save:hover { color: var(--gold-deep); }
.lib-page .scard__save.is-saved { color: var(--gold); opacity: 1; }
.lib-page .scard__check { position: absolute; right: 8px; top: 14px; color: var(--muted-2); font-size: 13px; }
.lib-page .scard.is-done .scard__title { color: var(--muted); }
.lib-page .scard.is-done .scard__glyph { opacity: .6; }

.lib-page .empty { grid-column: 1 / -1; text-align: center; font-style: italic; color: var(--muted); font-size: 17px; padding: 54px 0; }
.lib-page .linkbtn { background: none; border: 0; padding: 0; font: inherit; font-style: italic; color: var(--gold-deep); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---- home quick-finder ---- */
.lib-page .facets .result-count { margin-left: auto; }
.lib-page .finder-hint { text-align: center; font-style: italic; color: var(--muted); font-size: 16px; padding: 34px 0 6px; }
.lib-page .finder-results { margin-top: 8px; }
.lib-page .finder-more { display: block; text-align: center; margin-top: 18px; font-family: "EB Garamond", serif; font-style: italic; font-size: 15px; color: var(--gold-deep); text-decoration: none; }
.lib-page .finder-more:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* ---- cover shelves (browse by eye) ---- */
.lib-page .shelves { max-width: 880px; margin: 6px auto 0; }
/* covers wrapped into a grid (browse page, covers view) */
.lib-page .covgrid { display: grid; grid-template-columns: repeat(auto-fill, 158px); justify-content: space-between; gap: 24px 16px; margin-top: 14px; }
.lib-page .shelf { position: relative; margin-top: 32px; }
.lib-page .shelf__head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 4px; }
.lib-page .shelf__title { font-family: "EB Garamond", serif; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.lib-page .shelf__sk { font-style: italic; font-size: 15px; color: var(--muted-2); letter-spacing: .02em; }
.lib-page .shelf__n { font-size: 11px; color: var(--muted-2); }
.lib-page .see-all { margin-left: auto; font-family: "EB Garamond", serif; font-style: italic; font-size: 14px; color: var(--gold-deep); text-decoration: none; white-space: nowrap; transition: color .2s; }
.lib-page .see-all:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.lib-page .shelf__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding: 10px 2px 14px; scrollbar-width: none; scroll-behavior: smooth; }
.lib-page .shelf__track::-webkit-scrollbar { display: none; }
.lib-page .shelf__arrow { position: absolute; top: 54%; transform: translateY(-30%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--paper-edge); background: rgba(247,242,233,.95); color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; z-index: 5; opacity: 0; transition: opacity .2s, color .2s, border-color .2s; box-shadow: 0 8px 22px -12px rgba(74,65,54,.5); }
.lib-page .shelf:hover .shelf__arrow { opacity: 1; }
.lib-page .shelf__arrow:hover { color: var(--gold-deep); border-color: var(--gold-soft); }
.lib-page .shelf__arrow--l { left: -10px; }
.lib-page .shelf__arrow--r { right: -10px; }
@media (hover: none) { .lib-page .shelf__arrow { display: none; } }

.lib-page .cov { position: relative; flex: 0 0 auto; width: 158px; height: 236px; scroll-snap-align: start; border-radius: 9px; border: 1px solid rgba(74,65,54,.16); background: linear-gradient(157deg, var(--tint), rgba(60,50,38,.17)); padding: 15px 15px 16px; cursor: pointer; text-align: left; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 14px 26px -20px rgba(74,65,54,.7); transition: transform .22s ease, box-shadow .22s ease; }
.lib-page .cov:hover { transform: translateY(-6px); box-shadow: 0 22px 36px -18px rgba(74,65,54,.6); z-index: 3; }
.lib-page .cov::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; pointer-events: none; }
.lib-page .cov__badge { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); opacity: .72; }
.lib-page .cov__title { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 20px; line-height: 1.05; color: var(--ink); margin-top: auto; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lib-page .cov__by { font-style: italic; font-size: 12px; color: var(--ink); opacity: .62; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-page .cov__foot { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 11px; letter-spacing: .02em; color: var(--ink); opacity: .7; }
.lib-page .cov__foot .ptri { width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 7px; border-color: transparent transparent transparent currentColor; }
.lib-page .cov__save { position: absolute; top: 11px; right: 10px; background: none; border: 0; cursor: pointer; color: var(--ink); opacity: 0; padding: 2px; line-height: 0; transition: opacity .2s, color .2s; }
.lib-page .cov:hover .cov__save { opacity: .65; }
.lib-page .cov__save:hover { opacity: 1; }
.lib-page .cov.is-saved .cov__save { opacity: 1; color: var(--gold-deep); }
.lib-page .cov__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(74,65,54,.2); display: none; }
.lib-page .cov__bar i { display: block; height: 100%; background: var(--gold); }
.lib-page .cov__check { position: absolute; top: 10px; right: 12px; color: var(--gold-deep); font-size: 13px; opacity: 0; }
.lib-page .cov.is-done .cov__check { opacity: 1; }
.lib-page .cov.is-done .cov__save { display: none; }
.lib-page .cov.is-done .cov__title { opacity: .5; }

/* ---- footer ---- */
.lib-page .foot { display: flex; justify-content: space-between; align-items: center; padding: 24px 56px; border-top: 1px solid var(--rule); font-family: var(--serif); font-size: 16px; letter-spacing: .02em; color: var(--muted); }
.lib-page .foot a { color: var(--muted); text-decoration: none; font-style: italic; }
.lib-page .foot a:hover { color: var(--gold-deep); }
@media (max-width: 560px) { .lib-page .foot { flex-direction: column; gap: 8px; text-align: center; padding: 24px; } }

/* ============================================================
   ITEM DETAIL PAGE (single teaching)
   ============================================================ */
.lib-page .ipage { max-width:920px; margin:0 auto; padding:0 40px 130px; }
.lib-page .iback { display:inline-flex; align-items:center; gap:8px; font-family:'EB Garamond',serif; font-style:italic; font-size:15px; color:var(--muted); text-decoration:none; margin-top:30px; transition:color .2s; }
.lib-page .iback:hover { color:var(--gold-deep); }

.lib-page .ihead { margin-top:22px; }
.lib-page .ihead__eyebrow { font-size:12px; letter-spacing:.18em; text-transform:uppercase; }
.lib-page .ihead__title { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:42px; line-height:1.04; color:var(--ink); margin:9px 0 0; text-wrap:balance; }
.lib-page .ihead__meta { font-style:italic; color:var(--ink-soft); font-size:16px; margin:10px 0 0; }
.lib-page .ihead__meta .dosha { font-style:normal; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); border:1px solid var(--gold-soft); border-radius:100px; padding:1px 8px; margin-left:8px; vertical-align:2px; }

.lib-page .istage { margin-top:24px; }

/* --- video / talk --- */
.lib-page .vstage { position:relative; width:100%; height:0; padding-bottom:56.25%; border-radius:14px; overflow:hidden; border:1px solid var(--paper-edge); background:radial-gradient(circle at 50% 42%, #efe2c6 0%, #e7d8b6 38%, #d9c79f 100%); }
.lib-page .vstage__center { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.lib-page .vstage__rings { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.5; }
.lib-page .vstage__rings svg { width:230px; height:230px; }
.lib-page .vstage__play { position:relative; width:80px; height:80px; border-radius:50%; background:rgba(247,242,233,.92); border:1px solid var(--paper-edge); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 14px 30px -14px rgba(74,65,54,.6); transition:transform .2s, opacity .2s; }
.lib-page .vstage:hover .vstage__play { transform:scale(1.05); }
.lib-page .vstage.is-playing .vstage__play { opacity:0; }
.lib-page .vstage__play .tri { width:0; height:0; border-style:solid; border-width:12px 0 12px 19px; border-color:transparent transparent transparent var(--gold-deep); margin-left:5px; }
.lib-page .vstage__play .pause { display:flex; gap:6px; }
.lib-page .vstage__play .pause i { width:5px; height:22px; background:var(--gold-deep); border-radius:1px; }
.lib-page .vctrl { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:14px; padding:24px 16px 13px; color:#F3EEE4; background:linear-gradient(transparent, rgba(40,34,26,.62)); }
.lib-page .vctrl button { background:none; border:0; color:inherit; cursor:pointer; line-height:0; opacity:.92; }
.lib-page .vctrl button:hover { opacity:1; }
.lib-page .vtime { font-size:12px; letter-spacing:.03em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.lib-page .scrub { flex:1; height:4px; border-radius:3px; background:rgba(255,255,255,.32); cursor:pointer; position:relative; }
.lib-page .scrub i { display:block; height:100%; background:var(--gold); border-radius:3px; }
.lib-page .scrub i::after { content:""; position:absolute; top:50%; right:0; width:11px; height:11px; border-radius:50%; background:#F3EEE4; transform:translate(50%,-50%); box-shadow:0 1px 4px rgba(0,0,0,.3); }
.lib-page .vctrl .vchip { font-size:11.5px; letter-spacing:.04em; border:1px solid rgba(243,238,228,.5); border-radius:100px; padding:2px 8px; }

/* --- audio --- */
.lib-page .astage { display:flex; align-items:center; gap:20px; background:var(--bg-card); border:1px solid var(--paper-edge); border-radius:14px; padding:22px 24px; }
.lib-page .aplay { flex:0 0 auto; width:60px; height:60px; border-radius:50%; border:1px solid var(--paper-edge); background:var(--bg); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .2s, box-shadow .2s; box-shadow:0 8px 20px -12px rgba(74,65,54,.5); }
.lib-page .aplay:hover { transform:scale(1.05); }
.lib-page .aplay .tri { width:0; height:0; border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent var(--alert); margin-left:4px; }
.lib-page .aplay .pause { display:flex; gap:5px; }
.lib-page .aplay .pause i { width:4px; height:18px; background:var(--alert); border-radius:1px; }
.lib-page .abody { flex:1; min-width:0; }
.lib-page .wave { display:flex; align-items:center; gap:3px; height:40px; cursor:pointer; }
.lib-page .wave span { flex:1; background:var(--rule); border-radius:2px; transition:background .15s; }
.lib-page .wave span.on { background:var(--alert); }
.lib-page .atime { display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; margin-top:9px; }

/* --- reading --- */
.lib-page .rprog { position:fixed; top:0; left:0; height:3px; background:var(--gold); width:0; z-index:50; transition:width .1s linear; }
.lib-page .article { font-size:19px; line-height:1.72; color:var(--ink); max-width:none; }
.lib-page .article p { margin:0 0 1.15em; text-wrap:pretty; }
.lib-page .article p:first-of-type::first-letter { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:3.6em; line-height:.72; float:left; padding:8px 12px 0 0; color:var(--gold-deep); }
.lib-page .article h3 { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:26px; color:var(--ink); margin:1.4em 0 .3em; }
.lib-page .article em { color:var(--gold-deep); }
.lib-page .article .pull { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:27px; line-height:1.3; color:var(--ink-soft); border-left:2px solid var(--gold-soft); padding-left:22px; margin:1.1em 0; max-width:none; }

/* --- practice --- */
.lib-page .pstage { }
.lib-page .pbreath { display:flex; flex-direction:column; align-items:center; gap:18px; background:var(--bg-card); border:1px solid var(--paper-edge); border-radius:14px; padding:38px 24px 30px; }
.lib-page .breath-ring { position:relative; width:128px; height:128px; display:flex; align-items:center; justify-content:center; }
.lib-page .breath-ring::before, .lib-page .breath-ring::after { content:""; position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--gold-soft); }
.lib-page .pbreath.is-playing .breath-ring::before { animation:breathe 8s ease-in-out infinite; }
.lib-page .pbreath.is-playing .breath-ring::after { animation:breathe 8s ease-in-out infinite; animation-delay:-4s; opacity:.5; }
@keyframes breathe{ 0%,100%{ transform:scale(.62); } 50%{ transform:scale(1); } }
.lib-page .breath-play { position:relative; z-index:2; width:62px; height:62px; border-radius:50%; background:var(--bg); border:1px solid var(--paper-edge); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.lib-page .breath-play .tri { width:0; height:0; border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent var(--gold); margin-left:4px; }
.lib-page .breath-play .pause { display:flex; gap:5px; } .lib-page .breath-play .pause i { width:4px; height:18px; background:var(--gold); border-radius:1px; }
.lib-page .pbreath__cue { font-style:italic; color:var(--muted); font-size:15px; }
.lib-page .pbreath__time { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.lib-page .psteps { list-style:none; margin:26px 0 0; padding:0; counter-reset:step; }
.lib-page .pstep { display:grid; grid-template-columns:34px 1fr; gap:16px; align-items:baseline; padding:15px 4px; border-top:1px solid var(--rule-soft); }
.lib-page .pstep:last-child { border-bottom:1px solid var(--rule-soft); }
.lib-page .pstep::before { counter-increment:step; content:counter(step,decimal-leading-zero); font-family:'Cormorant Garamond',serif; font-style:italic; font-size:17px; color:var(--gold); }
.lib-page .pstep__t { font-size:17px; color:var(--ink); line-height:1.5; }

/* --- link --- */
.lib-page .lstage { text-align:center; border:1px solid var(--paper-edge); border-radius:14px; background:var(--bg-card); padding:44px 30px; }
.lib-page .lstage__glyph { width:58px; height:58px; border-radius:50%; border:1px solid var(--rule); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:var(--muted); }
.lib-page .lstage__say { font-style:italic; color:var(--ink-soft); font-size:17px; }
.lib-page .lstage__src { font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
.lib-page .lstage__open { display:inline-flex; align-items:center; gap:9px; font-family:'EB Garamond',serif; font-size:16px; color:#fff; background:var(--gold); border:1px solid var(--gold); border-radius:100px; padding:12px 28px; text-decoration:none; cursor:pointer; margin-top:20px; transition:background .2s, box-shadow .2s; }
.lib-page .lstage__open:hover { background:var(--gold-deep); box-shadow:0 8px 20px -10px rgba(176,137,46,.7); }

/* --- shared: actions / about / teacher / related --- */
.lib-page .iactions { display:flex; gap:13px; align-items:center; flex-wrap:wrap; margin-top:26px; padding-top:24px; border-top:1px solid var(--rule); }
.lib-page .iact { font-family:'EB Garamond',serif; font-size:15.5px; border-radius:100px; padding:11px 24px; cursor:pointer; white-space:nowrap; transition:background .2s, color .2s, border-color .2s, box-shadow .2s; }
.lib-page .iact--primary { color:#fff; background:var(--gold); border:1px solid var(--gold); }
.lib-page .iact--primary:hover { background:var(--gold-deep); box-shadow:0 6px 18px -10px rgba(176,137,46,.7); }
.lib-page .iact--primary.is-done { color:var(--gold-deep); background:none; }
.lib-page .iact--ghost { color:var(--ink-soft); background:none; border:1px solid var(--rule); display:inline-flex; align-items:center; gap:8px; }
.lib-page .iact--ghost:hover { border-color:var(--gold-soft); color:var(--gold-deep); }
.lib-page .iact--save.is-saved { color:var(--gold-deep); border-color:var(--gold-soft); }
.lib-page .iact--save.is-saved svg { fill:currentColor; }

.lib-page .about { margin-top:30px; }
.lib-page .about__h { font-family:'EB Garamond',serif; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
.lib-page .about__body { font-size:17px; line-height:1.62; color:var(--ink-soft); text-wrap:pretty; }

.lib-page .teacher { display:flex; gap:16px; align-items:center; margin-top:32px; padding-top:24px; border-top:1px solid var(--rule); }
.lib-page .teacher__av { flex:0 0 auto; width:54px; height:54px; border-radius:50%; background:var(--bg-warm); border:1px solid var(--paper-edge); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-size:21px; color:var(--gold-deep); }
.lib-page .teacher__name { font-family:'EB Garamond',serif; font-weight:600; font-size:18px; color:var(--ink); }
.lib-page .teacher__role { font-style:italic; font-size:14px; color:var(--muted); margin-top:1px; }

.lib-page .related { margin-top:42px; }
.lib-page .related__h { display:flex; align-items:baseline; gap:13px; font-family:'EB Garamond',serif; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin:0 0 4px; }
.lib-page .related__h::after { content:""; flex:1; height:1px; background:var(--rule); }
.lib-page .rel { display:flex; gap:14px; align-items:center; padding:15px 4px; border-top:1px solid var(--rule-soft); text-decoration:none; color:inherit; cursor:pointer; transition:background .25s; }
.lib-page .rel:last-child { border-bottom:1px solid var(--rule-soft); }
.lib-page .rel:hover { background:rgba(255,255,255,.5); }
.lib-page .rel__glyph { flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:1px solid var(--rule); display:flex; align-items:center; justify-content:center; }
.lib-page .rel__body { flex:1; min-width:0; display:flex; flex-direction:column; }
.lib-page .rel__t { display:block; font-family:'EB Garamond',serif; font-weight:600; font-size:17px; color:var(--ink); }
.lib-page .rel:hover .rel__t { color:var(--gold-deep); }
.lib-page .rel__m { display:block; font-size:13px; color:var(--muted); margin-top:2px; }
.lib-page .rel__len { margin-left:auto; font-style:italic; font-size:13px; color:var(--muted); white-space:nowrap; }

/* preview switcher (review helper) */
.lib-page .formswitch { position:fixed; bottom:18px; right:18px; display:flex; align-items:center; gap:6px; background:var(--bg-card); border:1px solid var(--paper-edge); border-radius:100px; padding:6px 6px 6px 14px; box-shadow:0 14px 34px -16px rgba(74,65,54,.6); z-index:60; }
.lib-page .formswitch__lab { font-style:italic; font-size:12px; color:var(--muted); letter-spacing:.04em; margin-right:4px; }
.lib-page .formswitch button { font-family:'EB Garamond',serif; font-size:13.5px; color:var(--ink-soft); background:none; border:0; border-radius:100px; padding:6px 13px; cursor:pointer; transition:background .2s, color .2s; }
.lib-page .formswitch button:hover { color:var(--gold-deep); }
.lib-page .formswitch button.is-on { background:var(--ink); color:var(--bg-card); }

/* ============================================================
   DARK MODE — official handoff (design_handoff_library/)
   Step 1 re-maps the design tokens to the official dark values
   (most components adapt for free because they use var(--…)).
   Step 2 ports the official component overrides verbatim, scoped
   under .lib-page. Light mode above is untouched.
   ============================================================ */
html[data-theme="dark"] .lib-page {
  /* Page background matches the main dark paper used by /self, /reading, /plan
     (#0f1410 family); cards lift subtly within that same green-black. */
  --bg:#0f1410; --bg-warm:#16140e; --bg-card:#181d16; --paper-edge:#22281e;
  /* shared top-nav dropdown surface on this page */
  --paper:#181d16;
  --ink:#EFE8D7; --ink-soft:#BDB6A4; --muted:#8E897A; --muted-2:#635F52;
  --rule:#2A2C20; --rule-soft:#20221A;
  --gold:#C9A24E; --gold-deep:#E0C074; --gold-soft:#6F6233; --alert:#D2774C;
}

/* ---- official component fixes (hardcoded light surfaces) ---- */
html[data-theme="dark"] .lib-page .feat__plate,
html[data-theme="dark"] .lib-page .vstage{ background:radial-gradient(circle at 50% 42%, #20231A 0%, #181A12 46%, #101108 100%); }
html[data-theme="dark"] .lib-page .feat__play,
html[data-theme="dark"] .lib-page .vstage__play{ background:rgba(16,18,11,.72); border-color:var(--gold-soft); }
html[data-theme="dark"] .lib-page .feat__dur{ background:rgba(16,18,11,.72); color:var(--ink-soft); border-color:var(--paper-edge); }
html[data-theme="dark"] .lib-page .cov{ background:linear-gradient(157deg, color-mix(in srgb, var(--tint) 22%, #16180F), #0D0E08); border-color:rgba(255,255,255,.07); box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 16px 28px -20px #000; }
html[data-theme="dark"] .lib-page .cov::after{ border-color:rgba(255,255,255,.06); }
html[data-theme="dark"] .lib-page .cov__bar{ background:rgba(255,255,255,.13); }
html[data-theme="dark"] .lib-page .scard:hover,
html[data-theme="dark"] .lib-page .pcard:hover,
html[data-theme="dark"] .lib-page .rel:hover{ background:rgba(255,255,255,.04); }
html[data-theme="dark"] .lib-page .shelf__arrow{ background:rgba(20,22,14,.95); color:var(--ink-soft); border-color:var(--paper-edge); }
html[data-theme="dark"] .lib-page .chip.is-on{ background:var(--gold); border-color:var(--gold); color:#1D1915; }
html[data-theme="dark"] .lib-page .vtoggle button.is-on{ background:rgba(201,162,78,.18); }
html[data-theme="dark"] .lib-page .search input:focus{ box-shadow:0 0 0 3px rgba(201,162,78,.2); }