/* Welcome and talk: what waits on the sign-up card (welcome.js), and the quieter helpers in
   Match chats (match.js): "Your turn", the first-message line and the link note. */

/* ---- Sign-up card: "Frieren will be waiting on your shelf." ---- */
.wt-ribbon { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; margin: 22px 0 -10px; padding: 12px 42px 12px 12px; border: 1px solid rgba(18, 18, 18, .14); color: var(--ink); background: rgba(18, 18, 18, .045); }
/* A red bookmark ribbon (栞) hangs over the top edge, as if the title were marked in the notebook. */
.wt-ribbon::after { content: ''; position: absolute; top: -9px; right: 14px; width: 14px; height: 42px; background: var(--red); box-shadow: 2px 2px 0 rgba(18, 18, 18, .15); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.wt-ribbon-covers { position: relative; display: flex; align-items: flex-start; }
.wt-ribbon-covers img, .wt-ribbon-covers i { position: relative; display: grid; place-items: center; width: 46px; height: 66px; flex: none; object-fit: cover; background: #ded7c2; box-shadow: 3px 3px 0 rgba(18, 18, 18, .18); }
.wt-ribbon-covers i { color: rgba(18, 18, 18, .35); font: 400 24px/1 "Yu Mincho", "MS Mincho", serif; font-style: normal; }
.wt-ribbon-covers.is-fanned { padding: 0 10px 4px 2px; }
.wt-ribbon-covers.is-fanned img + img { margin-left: -32px; }
.wt-ribbon-covers.is-fanned img:nth-child(1) { z-index: 3; transform: rotate(-6deg); }
.wt-ribbon-covers.is-fanned img:nth-child(2) { z-index: 2; transform: translateY(2px) rotate(2deg); }
.wt-ribbon-covers.is-fanned img:nth-child(3) { z-index: 1; transform: translateY(4px) rotate(9deg); }
.wt-ribbon p { min-width: 0; margin: 0; color: #3d3a35; font: 15px/1.45 Georgia, serif; overflow-wrap: anywhere; }
.wt-ribbon p i { color: var(--ink); }
.wt-ribbon-kicker { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--red); font: 800 9px/1.2 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.wt-ribbon-kicker span { font: 400 15px/1 "Yu Mincho", "MS Mincho", serif; letter-spacing: 0; }
.wt-ribbon small { display: block; margin-top: 5px; color: #6d685e; font: 12px/1.4 Arial, sans-serif; }

/* ---- Match: conversations ---- */
.wt-turn { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding: 3px 7px 3px 6px; vertical-align: 3px; border: 1px solid var(--ink); color: var(--ink); font: 800 10px/1 Arial, sans-serif; font-style: normal; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.wt-turn::before { content: ''; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--red); }

/* ---- Match: inside a chat ---- */
.wt-first-note { display: flex; align-items: center; gap: 10px; margin: 0; padding: 4px 14px; border-bottom: 1px solid var(--mx-line, #c9c2ad); color: #3d3a35; background: #f6efdc; font: italic 14px/1.4 Georgia, serif; }
.wt-first-mark { display: grid; place-items: center; width: 26px; height: 26px; flex: none; color: var(--paper); background: var(--red); font: 400 15px/1 "Yu Mincho", "MS Mincho", serif; font-style: normal; transform: rotate(-4deg); }
.wt-first-note button { min-height: 44px; margin: -6px 0; padding: 0 4px; border: 0; color: #a12519; background: none; font: 700 13px/1 Arial, sans-serif; font-style: normal; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wt-first-note button:hover { color: var(--ink); }
.wt-first-note button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Watch buddies open a chat with the shared picks showing; the thread below still needs room to read. */
.mx-chat .mx-together[open] .match-watch-ideas { max-height: min(30vh, 260px); }

/* Empty, the live region takes no room; it is filled while a link sits in the message box. */
.wt-link-note { margin: 0; color: #57534c; background: var(--paper); font: 13px/1.4 Arial, sans-serif; }
.wt-link-note.is-shown { display: flex; align-items: center; gap: 8px; padding: 0 12px 10px; }
.wt-link-mark { flex: none; color: var(--red); font: 400 16px/1 "Yu Mincho", "MS Mincho", serif; }

@media (max-width: 760px) {
    .wt-ribbon { margin-top: 18px; padding-right: 36px; }
    .wt-ribbon::after { right: 10px; }
    .wt-first-note { padding: 4px 12px; font-size: 13px; }
}