/* AniList → notebook (listsync.js): the sync bar in Notebook → Shelf (on night) and in the AniList card (on paper),
   the "from AniList" mark on shelf titles, and the check-in for a title finished on AniList (reactions only). */

.listsync-bar { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid #3b3935; color: var(--paper); }
.listsync-bar[hidden], .listsync-problem[hidden] { display: none; }
.listsync-seal { display: grid; place-items: center; width: 34px; height: 34px; color: var(--paper); background: var(--red); border-radius: 5px; font: 19px/1 "Yu Mincho", "MS Mincho", serif; }
.listsync-copy { min-width: 0; }
.listsync-when { margin: 0; color: #cfcbbf; font: italic 15px/1.35 Georgia, serif; overflow-wrap: anywhere; }
.listsync-problem { margin: 3px 0 0; color: #ff8a7f; font: 13px/1.45 Arial, sans-serif; }
.listsync-hint { margin: 4px 0 0; color: #6f6b62; font: 13px/1.45 Arial, sans-serif; }
.listsync-now { min-height: 44px; padding: 0 14px; border: 1px solid #8a8374; color: var(--paper); background: transparent; font: 700 12px/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.listsync-now:hover:not(:disabled) { border-color: var(--red); color: #fff; }
.listsync-now:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.listsync-now:disabled { cursor: progress; opacity: .72; }
.listsync-bar[data-state="busy"] .listsync-seal { animation: listsync-breathe 1.2s ease-in-out infinite alternate; }
.listsync-bar[data-state="problem"] { border-color: #6b3430; }
@keyframes listsync-breathe { from { opacity: 1; } to { opacity: .45; } }

/* On the paper of the AniList card in Settings. */
.account-connection .listsync-bar { margin: 18px 0 0; border-color: #b9b29f; color: var(--ink); }
.account-connection .listsync-when { color: #46433c; }
.account-connection .listsync-problem { color: #a8281e; }
.account-connection .listsync-now { color: var(--ink); }
.account-connection .listsync-now:hover:not(:disabled) { color: var(--red); }
.account-connection .listsync-bar[data-state="problem"] { border-color: #c98f86; }

/* The switch (a real checkbox, role="switch") and, on the shelf when it is off, the way to Settings. */
.listsync-when[hidden], .listsync-now[hidden], .listsync-settings-link[hidden] { display: none; }
.listsync-switch { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0 0 4px; color: var(--ink); font: 700 15px/1.35 Arial, sans-serif; cursor: pointer; }
.listsync-switch input { flex: 0 0 auto; width: 46px; height: 26px; margin: 0; border: 1px solid #8a8374; border-radius: 13px; cursor: pointer; -webkit-appearance: none; appearance: none;
    background: radial-gradient(circle at 12px 50%, var(--paper) 0 8px, transparent 9px), #8f8c83; }
.listsync-switch input:checked { border-color: var(--red); background: radial-gradient(circle at 32px 50%, var(--paper) 0 8px, transparent 9px), var(--red); }
.listsync-switch input:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.listsync-switch input:disabled { cursor: progress; opacity: .6; }
.listsync-settings-link { min-height: 44px; margin: 4px 0 0; padding: 0; border: 0; color: #ff8a7f; background: none; font: 700 12px/1.3 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.listsync-settings-link:hover { color: #fff; }
.listsync-settings-link:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.listsync-bar[data-state="off"] .listsync-seal { color: #c9c4b6; background: #3b3935; }
.account-connection .listsync-bar[data-state="off"] .listsync-seal { color: #6f6b62; background: #ded7c2; }

@media (max-width: 400px) {
    .listsync-bar { grid-template-columns: 34px minmax(0, 1fr); }
    .listsync-now { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
    .listsync-bar[data-state="busy"] .listsync-seal { animation: none; opacity: .6; }
}

/* The mark on a shelf title the AniList import set last. */
.nb-item-synced { margin: 4px 0 0; color: #8fb3df; font: 700 10px/1.3 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.nb-item-synced span { margin-right: 5px; color: var(--red); font: 400 12px/1 "Yu Mincho", "MS Mincho", serif; letter-spacing: 0; }
.nb-shelf[data-layout="list"] .nb-item-synced { color: var(--blue); }

/* Finished on AniList: only "how was it?", no "still watching" and no "not yet". */
.watch-checkin.is-listsync [data-checkin-outcome="watching"],
.watch-checkin.is-listsync .decision-gap,
.watch-checkin.is-listsync .watch-checkin-notyet { display: none; }
#watchCheckinQuestion[hidden], .watch-checkin-synced[hidden] { display: none; }