/* v263 Meditation library: magical gold on black. Length pills first, five
   moment tags with gold line icons, cards with a faint gold edge glow and a
   slow shimmer on hover or tap. A quiet fade between lengths. Motion is
   subtle, off under prefers-reduced-motion, and nothing here animates during
   a sit (the library is hidden while a sit plays). */
.lib-len-row { grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }
.lib-len-btn {
  position: relative;
  overflow: hidden;
  min-height: 52px;
  padding: 0.35rem 0.2rem;
  border: 1px solid rgba(232, 200, 120, 0.55);
  border-radius: 999px;
  background: radial-gradient(120% 140% at 50% 0%, rgba(232, 200, 120, 0.14), rgba(0, 0, 0, 0) 70%), #000;
  color: #f4ecd8;
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.05;
  box-shadow: 0 0 10px rgba(232, 200, 120, 0.16), inset 0 0 8px rgba(232, 200, 120, 0.08);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.lib-len-btn small { font-family: inherit; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(232, 200, 120, 0.75); }
.lib-len-btn:hover { border-color: #e8c878; box-shadow: 0 0 14px rgba(232, 200, 120, 0.3), inset 0 0 8px rgba(232, 200, 120, 0.12); }
.lib-len-btn[aria-pressed="true"] {
  background: linear-gradient(180deg, #f3dc9a, #e8c878 55%, #c9a24e);
  border-color: #f3dc9a;
  color: #120d02;
  box-shadow: 0 0 18px rgba(232, 200, 120, 0.45);
}
.lib-len-btn[aria-pressed="true"] small { color: rgba(18, 13, 2, 0.7); }
.lib-len-btn[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 250, 230, 0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: lib-shimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lib-shimmer { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

.lib-chip { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 40px; padding: 0.3rem 0.85rem 0.3rem 0.65rem; box-shadow: 0 0 8px rgba(232, 200, 120, 0.1); }
.lib-chip-icon { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: #e8c878; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.lib-chip[aria-pressed="true"] .lib-chip-icon { stroke: #120d02; }

.lib-list { transition: opacity 0.18s ease; }
.lib-list.lib-fading { opacity: 0; }
.lib-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(232, 200, 120, 0.34);
  background: radial-gradient(140% 120% at 0% 0%, rgba(232, 200, 120, 0.07), rgba(0, 0, 0, 0) 60%), #050505;
  box-shadow: 0 0 12px rgba(232, 200, 120, 0.1), inset 0 0 0 1px rgba(232, 200, 120, 0.05);
  transition: box-shadow 0.5s ease, border-color 0.5s ease;
}
.lib-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(243, 220, 154, 0.12) 50%, transparent 65%);
  transform: translateX(-130%);
  pointer-events: none;
}
.lib-card:hover,
.lib-card:active,
.lib-card:focus-within { border-color: rgba(232, 200, 120, 0.7); box-shadow: 0 0 18px rgba(232, 200, 120, 0.22); }
.lib-card:hover::after,
.lib-card:active::after { transform: translateX(130%); transition: transform 1.8s ease; }
.lib-hour { margin-top: 1.1rem; padding: 0.9rem 0.9rem 0.6rem; border: 1px solid rgba(232, 200, 120, 0.4); border-radius: 14px; background: radial-gradient(120% 100% at 50% 0%, rgba(232, 200, 120, 0.1), rgba(0, 0, 0, 0) 70%), #030303; box-shadow: 0 0 14px rgba(232, 200, 120, 0.12); }
.lib-hour[hidden] { display: none; }
.lib-hour-title { margin: 0; color: #e8c878; font-family: var(--display); font-size: 1.15rem; }
.lib-hour-line, .lib-hour-soon { margin: 0.2rem 0 0.5rem; color: rgba(244, 236, 216, 0.7); font-size: 0.85rem; }
.lib-hour-soon { font-style: italic; color: rgba(232, 200, 120, 0.8); }

@media (prefers-reduced-motion: reduce) {
  .lib-len-btn[aria-pressed="true"]::after { animation: none; display: none; }
  .lib-card::after { display: none; }
  .lib-len-btn, .lib-card, .lib-list { transition: none; }
}
/* While a sit plays, nothing in the library moves. */
html:has(.is-playing) .lib-len-btn::after,
html:has(.is-playing) .lib-card::after,
html:has(.sit-now.is-live) .lib-len-btn::after,
html:has(.sit-now.is-live) .lib-card::after { animation: none; display: none; }
html:has(.is-playing) .lib-card,
html:has(.is-playing) .lib-list,
html:has(.sit-now.is-live) .lib-card,
html:has(.sit-now.is-live) .lib-list { transition: none; }

/* v263 also carries the v259 L2 lotus cards (from draft #201). */
/* v259 — two tall lotus cards (L2 Open bloom). Thin gold lines, flat. */
body.page-sit .sit-quiet-row > .sit-quiet-links.mc-cards,
.sit-quiet-links.mc-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px auto 8px;
  max-width: 28rem;
  width: 100%;
  text-align: left;
}
.mc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  min-height: 284px;
  min-width: 44px;
  width: 100%;
  margin: 0;
  padding: 18px 14px 14px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 16px;
  color: #f3ead2;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  background: radial-gradient(120% 80% at 50% 20%, #241b0d 0%, #110d07 55%, #060504 100%);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.mc-card:hover { border-color: rgba(212, 175, 55, 0.7); }
.mc-card:focus-visible {
  outline: 2px solid #d4af37;
  outline-offset: 3px;
}
.mc-card[aria-expanded="true"] { border-color: #d4af37; }
.mc-art {
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  width: 176px;
  height: 176px;
  max-width: none;
  opacity: 0.62;
  pointer-events: none;
}
.mc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, transparent 42%, rgba(6, 5, 4, 0.88) 64%, #060504 100%);
}
.mc-card > span { position: relative; z-index: 2; }
.mc-card .mc-icon {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 62px;
  transform: translateX(-50%);
  width: 42px;
  height: 42px;
  fill: none;
  stroke: #f0d27a;
  stroke-width: 1.1;
  background: radial-gradient(circle, #0e0b06 55%, transparent 72%);
  border-radius: 50%;
  padding: 4px;
}
.mc-eyebrow { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(212, 175, 55, 0.8); }
.mc-title { font-family: "Cormorant Garamond", Georgia, serif; font-size: 23px; line-height: 1.08; color: #f6edd3; margin: 4px 0 6px; font-weight: 500; }
.mc-line { font-family: Georgia, serif; font-style: italic; font-size: 13px; color: #d4af37; margin: 0 0 12px; line-height: 1.3; }
.mc-card > .mc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border-top: 1px solid rgba(212, 175, 55, 0.18);
  padding-top: 10px;
}
.mc-meta { font-size: 11px; color: rgba(243, 234, 210, 0.65); letter-spacing: 0.02em; line-height: 1.3; }
.mc-arrow {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid #d4af37;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #d4af37;
  font-size: 15px;
  transition: transform 0.2s ease;
}
.mc-card:hover .mc-arrow,
.mc-card:focus-visible .mc-arrow { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .mc-card,
  .mc-arrow { transition: none; }
  .mc-card:hover .mc-arrow,
  .mc-card:focus-visible .mc-arrow { transform: none; }
}

/* v264: two bubbles side by side, always visible. "A quiet hello" keeps its
   filled look; "How it works" is the outline sibling with a hollow ring. */
.sit-intro { flex-wrap: wrap; gap: 0.5rem; }
.sit-intro[hidden] { display: flex !important; }
.sit-howto-bubble {
  background: transparent;
  background-image: none;
  border-color: rgba(236, 184, 62, 0.42);
  color: rgba(236, 184, 62, 0.9);
}
.sit-howto-bubble::before {
  background: transparent;
  border: 1px solid rgb(236, 184, 62);
  width: 0.42rem;
  height: 0.42rem;
  box-sizing: border-box;
}
.sit-intro-bubble[aria-expanded="true"] { border-color: rgba(246, 231, 184, 0.85); color: #f6e7b8; }
.sit-intro-card { flex-basis: 100%; }

/* v280: breathing room in the length view. About 24px between the intro
   line, HOW LONG DO YOU HAVE? and the length pills, so nothing touches at 390px. */
#all-sits > .sit-invite { margin-bottom: 24px; }
#all-sits .lib-len { margin-top: 0; }
#all-sits .lib-len-title { margin: 0 0 24px; }

/* v289: category groups in each length view. Small gold caps with the tag
   icon, no boxes or dividers. Each card edge carries a faint category tint,
   still mainly gold. */
.lib-group-head { list-style: none; margin: 1.3rem 0 0.45rem; padding: 0; }
.lib-group-head:first-child { margin-top: 0.2rem; }
.lib-group-title { display: flex; align-items: center; gap: 0.45rem; margin: 0; color: #e8c878; font-family: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.lib-group-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lib-card[data-lib-tint="everyday"] { box-shadow: 0 0 12px rgba(240, 190, 105, 0.13), inset 0 0 0 1px rgba(232, 200, 120, 0.05); }
.lib-card[data-lib-tint="kindness"] { box-shadow: 0 0 12px rgba(224, 168, 150, 0.12), inset 0 0 0 1px rgba(232, 200, 120, 0.05); }
.lib-card[data-lib-tint="quiet"] { box-shadow: 0 0 12px rgba(178, 196, 214, 0.11), inset 0 0 0 1px rgba(232, 200, 120, 0.05); }
.lib-card[data-lib-tint="work"] { box-shadow: 0 0 12px rgba(196, 146, 92, 0.13), inset 0 0 0 1px rgba(232, 200, 120, 0.05); }
.lib-card[data-lib-tint="builders"] { box-shadow: 0 0 12px rgba(178, 204, 150, 0.11), inset 0 0 0 1px rgba(232, 200, 120, 0.05); }
/* v292: Traders, soft amber, still mostly gold. */
.lib-card[data-lib-tint="traders"] { box-shadow: 0 0 12px rgba(226, 170, 84, 0.13), inset 0 0 0 1px rgba(232, 200, 120, 0.05); }
.lib-card[data-lib-tint="gamers"] { box-shadow: 0 0 12px rgba(190, 168, 216, 0.11), inset 0 0 0 1px rgba(232, 200, 120, 0.05); }

/* v295: "Any length" is a small centered gold text link under the circles.
   Range headings in the Any length view are light and quiet. */
.lib-any-line { margin: 0.7rem 0 0; text-align: center; }
.lib-any {
  min-height: 44px;
  padding: 0 0.9rem;
  border: 0;
  background: none;
  color: #e8c878;
  font: inherit;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-color: rgba(232, 200, 120, 0.45);
  text-underline-offset: 4px;
  cursor: pointer;
}
.lib-any[aria-pressed="true"] { text-decoration-color: #e8c878; font-weight: 600; }
.lib-range-head { margin-top: 1.4rem; }
.lib-range-title { margin: 0; color: rgba(232, 200, 120, 0.72); font-family: inherit; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; }
.lib-range-unit { font-size: 0.62rem; }
/* v295: "Under 3" stays on one line with a smaller MIN below, in every language. */
.lib-len-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lib-len-num { display: block; white-space: nowrap; }
.lib-len-btn small { display: block; }
.lib-len-btn[data-lib-len="under-3"] .lib-len-num { font-size: 0.74rem; letter-spacing: 0; }

/* v302 home cards (mockup home-cards-v1): Start here wears the dawn lotus
   mandala; Meditation library the night mandala (moons, stars, temple) on
   indigo-black. The mandalas carry their own centre icon and sit quietly
   behind the text under a dark fade, so the words stay readable. Nothing moves. */
.mc-card.mc-start,
.mc-card.mc-lib { min-height: 300px; }
.mc-card.mc-start {
  border-color: rgba(232, 170, 110, 0.45);
  background: radial-gradient(ellipse 120% 45% at 50% 0%, rgba(214, 120, 80, 0.28), rgba(120, 60, 30, 0.1) 55%, transparent 80%), linear-gradient(#150c08, #0b0806 60%, #080605);
}
.mc-card.mc-lib {
  border-color: rgba(201, 162, 74, 0.45);
  background: radial-gradient(ellipse 110% 50% at 50% 25%, rgba(40, 36, 100, 0.35), transparent 75%), linear-gradient(#0a0918, #07060f 60%, #060509);
}
.mc-start .mc-art,
.mc-lib .mc-art {
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  height: auto;
  aspect-ratio: 450 / 430;
  opacity: 0.55;
}
.mc-start .mc-icon,
.mc-lib .mc-icon { display: none; }
.mc-card.mc-start::after { background: linear-gradient(180deg, transparent 0%, transparent 30%, rgba(11, 8, 6, 0.9) 52%, #0b0806 100%); }
.mc-card.mc-lib::after { background: linear-gradient(180deg, transparent 0%, transparent 30%, rgba(7, 6, 15, 0.9) 52%, #07060f 100%); }
/* The one bright label: a thin gold pill with sparkles and a soft glow. */
.mc-start .mc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border: 1px solid rgba(255, 216, 107, 0.55);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 216, 107, 0.06), rgba(255, 216, 107, 0.16), rgba(255, 216, 107, 0.06));
  box-shadow: 0 0 10px rgba(255, 200, 90, 0.25);
  color: #ffd86b;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px rgba(255, 210, 100, 0.7);
  max-width: 100%;
  line-height: 1.25;
}
.mc-start .mc-eyebrow::before,
.mc-start .mc-eyebrow::after { content: "\2726"; font-size: 7px; color: #fff1c2; }
.mc-lib .mc-eyebrow { color: #b8994e; letter-spacing: 0.16em; }
.mc-start .mc-title,
.mc-lib .mc-title { color: #f6ecd6; }
.mc-start .mc-line,
.mc-lib .mc-line { color: #ddb350; }
.mc-start .mc-meta,
.mc-lib .mc-meta { color: #cfc5b2; }
.mc-start .mc-arrow,
.mc-lib .mc-arrow { border-color: #d6ab4e; color: #e6bd5c; }

/* v316: brighter home mandalas on every width. The art is fully lit with a
   soft gold glow and more contrast; the dark fade starts lower so more of it
   shows, and the library's indigo is a cleaner, richer violet with warm gold
   light at the centre. Text sits on the same dark base, so it stays legible. */
.mc-start .mc-art,
.mc-lib .mc-art {
  opacity: 0.95;
  filter: brightness(1.35) contrast(1.25) saturate(1.15) drop-shadow(0 0 6px rgba(255, 200, 90, 0.45));
}
.mc-card.mc-start {
  background: radial-gradient(ellipse 85% 45% at 50% 28%, rgba(255, 196, 100, 0.2), transparent 70%), radial-gradient(ellipse 120% 45% at 50% 0%, rgba(224, 128, 80, 0.34), rgba(120, 60, 30, 0.1) 55%, transparent 80%), linear-gradient(#170d08, #0b0806 60%, #080605);
}
.mc-card.mc-lib {
  background: radial-gradient(ellipse 80% 42% at 50% 28%, rgba(255, 200, 110, 0.14), transparent 70%), radial-gradient(ellipse 115% 55% at 50% 22%, rgba(92, 64, 190, 0.42), rgba(40, 26, 96, 0.18) 55%, transparent 80%), linear-gradient(#100b26, #08061a 60%, #060509);
}
.mc-card.mc-start::after { background: linear-gradient(180deg, transparent 0%, transparent 38%, rgba(11, 8, 6, 0.88) 58%, #0b0806 100%); }
.mc-card.mc-lib::after { background: linear-gradient(180deg, transparent 0%, transparent 38%, rgba(8, 6, 26, 0.88) 58%, #08061a 100%); }

/* v316: the path pill already says "Your DogeDharma path"; the heading under it
   stays for screen readers (it names the section) but is no longer shown. */
.journey > .journey-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}