/* The Fertility Library reading path and Kara's notes (7 Nov 2026). Its own file, loaded by the website's head
   only, so the course (which copies styles.css) never picks these rules up. Uses the site's tokens. */

/* The path strip at the top of a library page */
.lib-path { margin: 0 0 2rem; padding: 1rem 1.2rem 1.1rem; border-radius: var(--panel-radius); background: var(--sage-soft); box-shadow: inset 0 0 0 1px rgb(40 93 93 / 0.1); }
.prose .lib-path__where { margin: 0 0 0.4rem; font-size: 0.86rem; color: var(--muted); }
.lib-path__where b { color: var(--teal-ink); }
.lib-path__count { color: var(--teal); font-weight: 700; }
.prose .lib-path ol { list-style: none; margin: 0; padding: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.prose .lib-path li { margin: 0; padding: 0; }
.prose .lib-path li::marker { content: none; }
.lib-path__dot { position: relative; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1.5px rgb(40 93 93 / 0.28); color: var(--teal); font-size: 0.72rem; font-weight: 700; text-decoration: none; transition: box-shadow 0.2s, background 0.2s; }
.prose a.lib-path__dot { text-decoration: none; }
.lib-path__dot:hover { box-shadow: inset 0 0 0 2px var(--teal); }
.lib-path__dot.is-read { background: var(--sage); box-shadow: none; color: var(--teal-ink); }
.lib-path__dot[aria-current] { background: var(--teal); color: var(--ivory); box-shadow: 0 0 0 4px rgb(216 170 165 / 0.55); }
.lib-path__dot[aria-current]::before { content: 'You are here'; position: absolute; left: 50%; bottom: calc(100% + 0.45rem); transform: translateX(-50%); white-space: nowrap; padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--rose-ink); color: var(--white); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; }
.lib-path__dot[aria-current]::after { content: ''; position: absolute; left: 50%; bottom: calc(100% + 0.1rem); transform: translateX(-50%); border: 0.28rem solid transparent; border-top-color: var(--rose-ink); }
.lib-path li:first-child .lib-path__dot[aria-current]::before { left: 0; transform: none; }
/* Phones (11 Nov 2026): the 16 circles wrap onto two rows, so the tag would cover the row above. It moves up
   beside "page X of 16" and the dark circle with its ring marks the page. */
.lib-path__here { display: none; }
@media (max-width: 640px) {
  .lib-path__here { display: inline-block; margin-left: 0.3rem; padding: 0.1rem 0.5rem; border-radius: var(--panel-radius); background: var(--rose-ink); color: var(--white); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 0.1em; }
  .lib-path__dot[aria-current]::before, .lib-path__dot[aria-current]::after { content: none; }
  .prose .lib-path ol { padding-top: 0.7rem; }
}
.prose a.lib-start { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 0.9rem; font-size: 0.86rem; font-weight: 700; color: var(--teal); text-decoration: none; }
.lib-start__arrow { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--rose); color: var(--rose-ink); animation: lib-bob 2.4s var(--ease) infinite; }
@keyframes lib-bob { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(5px); } }

/* Up next at the end */
.lib-next { margin: 3rem 0 0; }
.prose .lib-next__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; margin: 0 0 0.7rem; font-size: var(--step-1); }
.lib-next__h > span { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rose-ink); }
.prose a.lib-next__card { display: grid; grid-template-columns: 140px minmax(0, 1fr); grid-template-areas: 'pic body' 'pic btn'; gap: 0.9rem 1.3rem; align-items: center; padding: 1.1rem; border-radius: var(--panel-radius); background: var(--teal); color: var(--ivory); text-decoration: none; box-shadow: var(--shadow-s); transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.prose a.lib-next__card:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--ivory); }
.lib-next__pic { grid-area: pic; align-self: stretch; display: grid; place-items: center; border-radius: var(--picture-radius); overflow: hidden; background: #faf6ec; }
.lib-next__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lib-next__body { grid-area: body; display: grid; gap: 0.3rem; }
.lib-next__body b { font-family: var(--font-serif); font-weight: 500; font-size: var(--step-1); line-height: 1.25; color: var(--ivory); }
.lib-next__body span { font-size: 0.92rem; line-height: 1.5; color: rgb(250 247 241 / 0.85); }
.lib-next__btn { grid-area: btn; justify-self: start; --btn-bg: var(--ivory); --btn-fg: var(--teal-ink); --btn-bd: var(--ivory); pointer-events: none; }
.prose .lib-next__foot { margin: 0.8rem 0 0; font-size: 0.88rem; }
.lib-next__card.is-in { animation: lib-glow 1.6s var(--ease) 0.1s 1; }
.lib-next__card.is-in .arrow, .male-read-next.is-in .arrow, .lib-dock__next.is-in > span[aria-hidden] { display: inline-block; animation: lib-nudge 1.1s var(--ease) 0.2s 3; }
@keyframes lib-nudge { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(6px); } }
@keyframes lib-glow { 0% { box-shadow: var(--shadow-s); } 40% { box-shadow: 0 0 0 6px rgb(216 170 165 / 0.45), var(--shadow); } 100% { box-shadow: var(--shadow-s); } }
@media (max-width: 560px) {
  .prose a.lib-next__card { grid-template-columns: 1fr; grid-template-areas: 'pic' 'body' 'btn'; }
  .lib-next__pic { aspect-ratio: 16 / 9; }
  .lib-next__btn { justify-self: stretch; }
}

/* The phone dock */
.lib-dock { display: none; }
@media (max-width: 999px) {
  .lib-dock { position: fixed; left: 0.6rem; right: 0.6rem; bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px)); z-index: 55; display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) auto; align-items: center; gap: 0.4rem; padding: 0.4rem; border-radius: 14px; background: rgb(255 253 252 / 0.97); box-shadow: 0 6px 24px rgb(23 59 59 / 0.18), inset 0 0 0 1px var(--line); transform: translateY(calc(100% + 1.2rem)); visibility: hidden; transition: transform 0.3s var(--ease), visibility 0s linear 0.3s; }
  .lib-dock.is-shown { transform: none; visibility: visible; transition: transform 0.3s var(--ease), visibility 0s; }
  .lib-dock__prev { display: grid; place-items: center; height: 2.6rem; border-radius: 10px; color: var(--teal); text-decoration: none; font-size: 1.15rem; }
  .lib-dock__where { display: grid; gap: 0.05rem; min-width: 0; padding: 0.15rem 0.3rem; text-decoration: none; color: var(--teal-ink); }
  .lib-dock__where b { font-size: 0.86rem; }
  .lib-dock__where > span:not(.lib-dock__bar) { font-size: 0.72rem; color: var(--muted); }
  .lib-dock__bar { display: block; height: 3px; margin-top: 0.25rem; border-radius: 3px; background: rgb(40 93 93 / 0.12); overflow: hidden; }
  .lib-dock__bar > span { display: block; height: 100%; background: var(--rose); transform-origin: 0 50%; transform: scaleX(0); }
  .lib-dock__next { display: inline-flex; align-items: center; gap: 0.35rem; height: 2.6rem; padding: 0 1.1rem; border-radius: 10px; background: var(--teal); color: var(--ivory); font-weight: 700; font-size: 0.9rem; text-decoration: none; }
  .lib-dock__next:hover { background: var(--teal-ink); color: var(--ivory); }
}

/* "Read" ticks on the library's topic cards */
.zcard { position: relative; }
.zcard__read { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--teal); color: var(--ivory); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* Toasts and petals */
.lib-toast { position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); z-index: 70; width: min(calc(100% - 1.4rem), 440px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.9rem; align-items: start; padding: 0.9rem 0.9rem 0.9rem 1rem; border-radius: 14px; background: var(--white); box-shadow: 0 12px 40px rgb(23 59 59 / 0.22), inset 0 0 0 1px var(--line); transform: translate(-50%, calc(100% + 2rem)); opacity: 0; transition: transform 0.45s var(--ease), opacity 0.3s; }
.lib-toast.is-in { transform: translate(-50%, 0); opacity: 1; }
@media (max-width: 999px) { body:has(.lib-dock) .lib-toast { bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px)); } }
.lib-toast__tick { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--sage); color: var(--teal-ink); }
.lib-toast__tick svg { width: 1.2rem; height: 1.2rem; stroke-dasharray: 24; stroke-dashoffset: 24; }
.lib-toast.is-in .lib-toast__tick svg { animation: lib-draw 0.5s var(--ease) 0.25s forwards; }
@keyframes lib-draw { to { stroke-dashoffset: 0; } }
.lib-toast__pic { width: 52px; height: 65px; object-fit: cover; object-position: 50% 20%; border-radius: 10px; }
.lib-toast__body { display: grid; gap: 0.2rem; min-width: 0; }
.lib-toast__body b { font-family: var(--font-serif); font-weight: 500; font-size: 1.05rem; line-height: 1.3; color: var(--teal-ink); }
.lib-toast__body p { margin: 0; font-size: 0.88rem; line-height: 1.5; }
.lib-toast__sig { font-size: 1.35rem; line-height: 1; }
.lib-toast__cta { justify-self: start; margin-top: 0.3rem; font-size: 0.85rem; font-weight: 700; color: var(--teal); }
.lib-toast__x { appearance: none; border: 0; background: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; font-size: 1.2rem; line-height: 1; color: var(--muted); cursor: pointer; }
.lib-toast__x:hover { background: var(--sage-soft); color: var(--teal-ink); }
.lib-toast--kara { width: min(calc(100% - 1.4rem), 480px); background: linear-gradient(160deg, var(--white), var(--rose-soft)); border-top: 4px solid var(--rose); }
.lib-petals { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; overflow: visible; }
.lib-petals i { position: absolute; width: 0.55rem; height: 0.8rem; border-radius: 60% 40% 60% 40%; opacity: 0; animation: lib-petal var(--d, 1.4s) cubic-bezier(0.2, 0.7, 0.3, 1) var(--delay, 0s) forwards; }
@keyframes lib-petal { 0% { opacity: 0.95; transform: translate(0, 0) rotate(0) scale(0.6); } 100% { opacity: 0; transform: translate(calc(var(--x) * 220px), calc(var(--y) * -170px + 90px)) rotate(var(--r)) scale(1); } }

/* Kara's thank-you note */
.kara-note { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 1.1rem; align-items: center; max-width: 620px; margin: 1.6rem auto 0; padding: 1.2rem 1.3rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); border-top: 4px solid var(--rose); text-align: left; animation: lib-note-in 0.6s var(--ease); }
.kara-note__pic { width: 80px; height: 100px; object-fit: cover; object-position: 50% 20%; border-radius: 10px; box-shadow: 0 0 0 4px var(--rose-soft); }
.kara-note__eyebrow { display: block; margin-bottom: 0.3rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rose-ink); }
.kara-note__body p { margin: 0 0 0.5rem; line-height: 1.6; color: var(--teal-ink); }
.kara-note__sig { display: flex; align-items: baseline; gap: 0.45rem; font-size: 0.9rem; color: var(--muted); }
.kara-note__sig .script-kara { font-size: 1.9rem; line-height: 1; }
@keyframes lib-note-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 520px) { .kara-note { grid-template-columns: 60px minmax(0, 1fr); } .kara-note__pic { width: 60px; height: 75px; } }

@media (prefers-reduced-motion: reduce) {
  .lib-start__arrow, .lib-next__card.is-in, .lib-next__card.is-in .arrow, .male-read-next.is-in .arrow, .lib-dock__next.is-in > span[aria-hidden], .kara-note { animation: none !important; }
  .lib-toast { transition: opacity 0.2s; }
}
@media print { .lib-path, .lib-next, .lib-dock, .lib-toast { display: none !important; } }
/* Full audit 10 Nov 2026 (DEV-03, DEV-10): the toast's close button is a full tap target, and on short or
   sideways phone screens the dock and toast step aside so the text stays readable */
.lib-toast__x { width: 2.6rem; height: 2.6rem; }
@media (orientation: landscape) and (max-height: 500px) { .lib-dock { display: none !important; } .lib-toast { display: none; } }
@media (max-width: 400px) and (max-height: 760px) { .lib-toast__pic { width: 40px; height: 50px; } .lib-toast { padding-block: 0.6rem; } }