/* ---- Taste nudges (nudge.js): the "Less like this?" sheet and the chips it shares with "Why it didn't work" ---- */

/* Chips: paper tags that take a red seal when chosen. */
.nudge-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.nudge-chip { position: relative; min-height: 44px; margin: 0; padding: 0 16px; border: 1px solid #aaa697; border-radius: 22px; color: var(--ink); background: rgba(255, 255, 255, .35); font: italic 15px/1.2 Georgia, serif; cursor: pointer; transition: color .15s, background-color .15s, border-color .15s; }
.nudge-chip:hover { border-color: var(--ink); }
.nudge-chip[aria-pressed="true"] { padding-left: 34px; border-color: var(--red); color: var(--paper); background: #b3332a; font-style: normal; }
/* 減 "less": the seal of a chosen chip. Decoration only, the state is in aria-pressed. */
.nudge-chip[aria-pressed="true"]::before { content: '減'; content: '減' / ''; position: absolute; top: 50%; left: 12px; margin-top: -8px; font: 400 15px/1 "Yu Mincho", "MS Mincho", serif; }
.nudge-chip:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.nudge-chip:disabled { opacity: .55; cursor: wait; }

/* The sheet: from the bottom on a phone, a paper card low in the middle on a wide screen. */
.nudge-sheet { position: fixed; inset: auto 0 0; width: min(100%, 560px); max-width: 100%; max-height: 90svh; margin: 0 auto; padding: 0 0 env(safe-area-inset-bottom); overflow: visible; border: 0; color: var(--ink); background: transparent; }
.nudge-sheet:not([open]) { display: none; }
.nudge-sheet::backdrop { background: rgba(8, 8, 8, .62); animation: nudge-sheet-dim .3s ease-out; }
@keyframes nudge-sheet-dim { from { opacity: 0; } }
.nudge-card { max-height: 90svh; overflow-y: auto; padding: 18px 18px 20px; border-top: 3px solid var(--red); color: var(--ink); background: var(--paper); background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(18, 18, 18, .055) 28px); box-shadow: 0 -14px 40px rgba(0, 0, 0, .5); }
.nudge-card .section-label span { display: inline-flex; align-items: baseline; gap: 6px; }
.nudge-card .section-label b { color: var(--red); font: 400 15px/1 "Yu Mincho", "MS Mincho", serif; letter-spacing: 0; }
.nudge-card h3 { margin: 8px 0 0; font: 400 24px/1.15 Georgia, serif; letter-spacing: -.02em; }
.nudge-lede { margin: 6px 0 0; color: #57534b; font: italic 15px/1.45 Georgia, serif; overflow-wrap: anywhere; }
.nudge-hint { margin: 12px 0 0; color: #6f6b62; font: 13px/1.5 Arial, sans-serif; }
.nudge-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px; margin-top: 16px; }
.nudge-actions .primary { min-height: 48px; padding: 0 22px; cursor: pointer; }
.nudge-actions .primary:disabled { opacity: .45; cursor: default; }
.nudge-actions .primary:disabled:hover { background: var(--ink); }
.nudge-actions button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

@media (min-width: 761px) {
    .nudge-sheet { bottom: 32px; }
    .nudge-card { padding: 22px 24px 24px; border-top: 0; border-left: 3px solid var(--red); box-shadow: 8px 8px 0 #080808; }
}
@media (max-width: 380px) {
    .nudge-actions .primary { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .nudge-sheet::backdrop { animation: none; }
    .nudge-chip { transition: none; }
}