/* The subscribe-for-audio reminder, the free-preview badge and the list tag
   (site/audio.js). A vermilion hanko stamped 音 sits in a soft pill that links
   to the plans; the first reminder on a page stamps in once, nothing loops,
   and nothing covers the study card. Colours fall back to the current palette
   when the redesign tokens are not loaded. */
:root {
  --ap-vermilion: var(--vermilion, var(--red, #b84731));
  --ap-vermilion-deep: var(--vermilion-deep, var(--red-dark, #953b2b));
  --ap-pine: var(--pine, var(--green, #315a48));
  --ap-ink: var(--ink, #27302a);
  --ap-muted: var(--muted, #6f786e);
  --ap-ease: var(--ease-enter, cubic-bezier(.32, .72, 0, 1));
  --ap-pop: cubic-bezier(.34, 1.4, .64, 1);
}

/* ---------------------------------------------------------------- reminder */
.audio-reminder {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 10px;
  margin: 10px 0 8px;
  padding: 4px 4px 4px 5px;
  border-radius: 999px;
  background: linear-gradient(100deg, rgba(184, 71, 49, .085), rgba(202, 169, 114, .10));
  box-shadow: 0 0 0 1px rgba(184, 71, 49, .13), 0 10px 24px -18px rgba(149, 59, 43, .45);
  color: var(--ap-ink);
  font-size: 12px;
  line-height: 1.35;
  text-decoration: none;
  vertical-align: middle;
  transition-property: background, box-shadow, transform;
  transition-duration: 320ms;
  transition-timing-function: var(--ap-ease);
}
.jp-audio-row .audio-reminder { margin: 2px 0; }
.audio-reminder:hover {
  background: linear-gradient(100deg, rgba(184, 71, 49, .13), rgba(202, 169, 114, .16));
  box-shadow: 0 0 0 1px rgba(184, 71, 49, .2), 0 14px 28px -18px rgba(149, 59, 43, .5);
}
.audio-reminder:active { transform: scale(.98); transition-duration: 90ms; }
.audio-reminder:focus-visible { outline: 2px solid var(--ap-vermilion); outline-offset: 3px; }

.ap-seal {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  rotate: -7deg;
  filter: drop-shadow(0 2px 3px rgba(149, 59, 43, .22));
}
.ap-seal > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; }
.ap-seal rect { fill: var(--ap-vermilion); }
.ap-seal .ap-seal-inner { fill: none; stroke: rgba(255, 253, 248, .55); stroke-width: 1; }
.ap-seal b {
  position: relative;
  color: #fffdf8;
  font: 700 14px/1 "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", serif;
  translate: 0 .5px;
}

/* Two small gold arcs: the seal is singing. */
.ap-seal .ap-sing {
  position: absolute;
  inset: auto;
  top: -9px;
  right: -10px;
  width: 15px;
  height: 15px;
  rotate: -45deg;
  fill: none;
  stroke: var(--gold, #caa972);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.ap-copy { display: flex; flex-wrap: wrap; column-gap: .35em; min-width: 0; }
.ap-copy b { color: var(--ap-vermilion-deep); font-weight: 700; letter-spacing: .01em; }
.ap-copy span { color: var(--ap-ink); }
:lang(ko) .ap-copy { word-break: keep-all; }

.ap-go {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 253, 248, .9);
  box-shadow: 0 0 0 1px rgba(184, 71, 49, .14);
  color: var(--ap-vermilion-deep);
  transition-property: transform, background;
  transition-duration: 320ms;
  transition-timing-function: var(--ap-ease);
}
.ap-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.audio-reminder:hover .ap-go { transform: translate(1px, -1px) scale(1.06); background: #fffdf8; }

/* The one-time stamp: the seal presses down (≤5% overshoot), then the words
   slide in beside it. Only the first reminder on a page gets it. */
@media (prefers-reduced-motion: no-preference) {
  .ap-stamp .ap-seal { animation: ap-stamp 520ms var(--ap-pop) both; }
  .ap-stamp .ap-copy, .ap-stamp .ap-go { animation: ap-slide 420ms var(--ap-ease) 140ms both; }
  .ap-stamp .ap-go { animation-delay: 200ms; }
  .ap-stamp .ap-sing { animation: ap-fade 260ms var(--ap-ease) 380ms both; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-stamp { animation: ap-fade 180ms var(--ap-ease) both; }
}
@keyframes ap-stamp {
  from { opacity: 0; scale: 1.4; rotate: -16deg; }
  45% { opacity: 1; }
  to { opacity: 1; scale: 1; rotate: -7deg; }
}
@keyframes ap-slide { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes ap-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------- preview badge */
.audio-preview-badge {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  margin: 10px 0 8px;
  padding: 4px 13px 4px 4px;
  border-radius: 999px;
  background: rgba(49, 90, 72, .08);
  box-shadow: 0 0 0 1px rgba(49, 90, 72, .13);
  color: var(--ap-pine);
  font-size: 12px;
  line-height: 1.35;
}
.jp-audio-row .audio-preview-badge { margin: 0; }
.audio-preview-badge .ap-dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--ap-pine);
  color: #fffdf8;
}
.audio-preview-badge .ap-dot .ap-waves { width: 13px; height: 13px; }
.audio-preview-badge b { font-weight: 700; }
.audio-preview-badge .ap-preview-rest { color: var(--ap-muted); }
.ap-waves { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* ---------------------------------------------------------------- list tag */
.tag.audio-preview-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--ap-pine);
  background: rgba(49, 90, 72, .06);
  box-shadow: inset 0 0 0 1px rgba(49, 90, 72, .22);
}
.tag.audio-preview-tag .ap-waves { width: 10px; height: 10px; }

@media (max-width: 480px) {
  .audio-reminder { gap: 8px; }
}