/* NagMeToDeath Core components. Colors come from the theme's --nm-* tokens (fallbacks for other themes). */
.nag-feed [hidden], .nag-form [hidden], .nagoff-wrap [hidden], .music-panel[hidden] { display: none !important; }
.hint { font-size: .875rem; color: var(--nm-muted, #536070); }
.empty { padding: 1.5rem; text-align: center; color: var(--nm-muted, #536070); border: 1px dashed var(--nm-line, #cfd6df); border-radius: 10px; }

/* Card */
.nag-card { background: var(--nm-surface, #fff); border: 1px solid var(--nm-line, #cfd6df); border-radius: 10px; padding: 1.1rem; display: grid; gap: .9rem; break-inside: avoid; margin: 0 0 1.25rem; min-width: 0; }
.nag-card .nag-title { font-size: 1.5rem; margin: 0; }
.nag-card.is-single .nag-title { font-size: clamp(2rem, 6vw, 3.4rem); }
.nag-card .nag-title a { color: inherit; text-decoration: none; }
.nag-card .nag-title a:hover { text-decoration: underline; }
.nag-card .meta { display: flex; flex-wrap: wrap; gap: .35rem; }
.nag-card .tag { font-size: .75rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; background: var(--nm-surface-2, #e3e8ee); color: var(--nm-ink, #141920); text-decoration: none; }
.nag-card .tag.pending { background: var(--nm-postit, #f6cf45); color: var(--nm-postit-ink, #2a2310); }
.nag-card .stats { display: grid; gap: .2rem; font-size: .85rem; color: var(--nm-muted, #536070); }
.nag-card .stats b { color: var(--nm-ink, #141920); }
.nag-card .nag-image { width: 100%; height: auto; border-radius: 8px; }
.nag-card .read-more { font-size: .9rem; font-weight: 700; }
.nag-video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 8px; }
.card-foot { display: flex; align-items: center; gap: .5rem; border-top: 1px solid var(--nm-line, #cfd6df); padding-top: .75rem; font-size: .9rem; }
.card-foot .alias { margin-right: auto; color: var(--nm-muted, #536070); font-style: italic; min-width: 0; overflow-wrap: anywhere; }
.vote { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--nm-line, #cfd6df); background: var(--nm-surface, #fff); color: var(--nm-ink, #141920); border-radius: 999px; padding: .35rem .7rem; font: 700 .85rem/1 inherit; cursor: pointer; text-decoration: none; font-variant-numeric: tabular-nums; }
.vote[aria-pressed="true"] { background: var(--nm-postit, #f6cf45); color: var(--nm-postit-ink, #2a2310); border-color: var(--nm-postit, #f6cf45); cursor: default; }

/* The artifacts */
.postit-note { background: var(--nm-postit, #f6cf45); color: var(--nm-postit-ink, #2a2310); font: 600 1.55rem/1.15 var(--nm-hand, cursive); padding: 1.1rem 1.1rem 1.4rem; transform: rotate(-1.5deg); box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .45); max-width: 22rem; }
.postit-note p { margin: 0; }
.postit-note.small { font-size: 1.2rem; padding: .7rem .8rem; }
.thread { display: grid; gap: .35rem; max-width: 22rem; font-size: .95rem; width: 100%; }
.thread .who-line { font-size: .75rem; color: var(--nm-muted, #536070); text-align: center; letter-spacing: .05em; }
.bubble { padding: .45rem .75rem; border-radius: 18px; max-width: 85%; line-height: 1.35; overflow-wrap: anywhere; }
.bubble.them { background: var(--nm-bubble-them, #dfe4ea); color: var(--nm-ink, #141920); justify-self: start; border-bottom-left-radius: 5px; }
.bubble.me { background: var(--nm-bubble-me, #1f6fd1); color: #fff; justify-self: end; border-bottom-right-radius: 5px; }
.story { font-size: 1.05rem; border-left: 3px solid var(--nm-postit, #f6cf45); padding-left: 1rem; }
.story p { margin: 0 0 .6rem; } .story p:last-child { margin: 0; }

/* Feed */
.filters { display: grid; gap: 1rem; padding-block: 1rem 1.25rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.chip-row .eyebrow { min-width: 6.5rem; margin-right: .3rem; }
.chip { border: 1px solid var(--nm-line, #cfd6df); background: var(--nm-surface, #fff); color: var(--nm-ink, #141920); border-radius: 999px; padding: .4rem .8rem; font-weight: 700; font-size: .875rem; line-height: 1.2; text-decoration: none; }
.chip[aria-current="true"] { background: var(--nm-ink, #141920); color: var(--nm-bg, #fff); border-color: var(--nm-ink, #141920); }
.feed-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.feed-bar p { margin: 0; }
.feed-bar select { font: inherit; padding: .45rem .7rem; border-radius: 8px; border: 1px solid var(--nm-field-line, #8592a3); background: var(--nm-surface, #fff); color: var(--nm-ink, #141920); margin-left: .4rem; }
.feed { columns: 3 300px; column-gap: 1.25rem; }
.feed-pages { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; padding-top: 1rem; }
.feed-pages .page-numbers { padding: .4rem .75rem; border-radius: 8px; border: 1px solid var(--nm-line, #cfd6df); text-decoration: none; }
.feed-pages .current { background: var(--nm-ink, #141920); color: var(--nm-bg, #fff); }

/* Hall of Fame */
.hof { background: var(--nm-film-bg, #0d1a26); color: var(--nm-film-ink, #f3efe4); border-radius: 10px; padding: 1.3rem; display: grid; gap: 1rem; margin-block: 1rem; }
.hof h2 { font-size: 1.6rem; color: var(--nm-postit, #f6cf45); margin: 0; }
.hof ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; counter-reset: hof; }
@media (max-width: 760px) { .hof ol { grid-template-columns: 1fr; } }
.hof li { counter-increment: hof; display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; align-items: baseline; min-width: 0; }
.hof li::before { content: counter(hof); grid-row: span 2; font: 900 2.6rem/1 var(--nm-display, Impact, sans-serif); color: var(--nm-postit, #f6cf45); }
.hof li a { font: 900 1.25rem/1.1 var(--nm-display, Impact, sans-serif); text-transform: uppercase; color: var(--nm-film-ink, #f3efe4); text-decoration: none; }
.hof li a:hover { text-decoration: underline; }
.hof li span { font-size: .85rem; opacity: .8; }
.hof .hint { color: var(--nm-film-ink, #f3efe4); opacity: .75; margin: 0; }

/* Nag-Off */
.nagoff-wrap h2 { margin: .3rem 0 .5rem; }
.nagoff { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-top: 1.5rem; }
.nagoff > * { min-width: 0; }
.nagoff .vs { align-self: center; font: 900 2.3rem/1 var(--nm-display, Impact, sans-serif); color: var(--nm-accent, #1f4f86); }
@media (max-width: 760px) { .nagoff { grid-template-columns: 1fr; } .nagoff .vs { justify-self: center; } }
.contender { display: grid; gap: .8rem; }
.contender .nag-card { margin: 0; }
.btn-vote, .btn-big, .btn-plain { display: inline-flex; justify-content: center; align-items: center; text-align: center; gap: .5rem; border: 0; border-radius: 999px; background: var(--nm-postit, #f6cf45); color: var(--nm-postit-ink, #2a2310); font: 700 1rem/1.2 inherit; padding: .85rem 1.2rem; cursor: pointer; text-decoration: none; }
.btn-plain { background: var(--nm-accent, #1f4f86); color: var(--nm-accent-ink, #fff); }
.btn-big { font: 900 1.5rem/1 var(--nm-display, Impact, sans-serif); text-transform: uppercase; letter-spacing: .03em; padding: 1rem 1.6rem; }
.result { display: grid; gap: .35rem; }
.result .line { display: flex; justify-content: space-between; font-weight: 700; font-variant-numeric: tabular-nums; }
.result .track, .vrow .track { display: block; height: 12px; background: var(--nm-surface-2, #e3e8ee); border-radius: 999px; overflow: hidden; }
.result .fill { display: block; height: 100%; background: var(--nm-postit, #f6cf45); border-radius: 999px; transition: width .6s ease; }

/* Verdict chart */
.verdict-chart { display: grid; gap: .85rem; }
.vrow { display: grid; grid-template-columns: minmax(0, 14rem) 1fr 3.2rem; gap: .75rem; align-items: center; }
.vrow .lbl { font-weight: 700; font-size: .95rem; }
.vrow .fill { display: block; height: 100%; background: var(--nm-accent, #1f4f86); border-radius: 999px; }
.vrow .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
@media (max-width: 520px) { .vrow { grid-template-columns: 1fr 3rem; } .vrow .track { grid-column: 1 / -1; grid-row: 2; } }

/* Forms */
.nag-form, .contact-form { display: grid; gap: 1.6rem; max-width: 720px; padding-bottom: 2rem; }
.nag-form .field, .contact-form .field { display: grid; gap: .45rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.field > label, .field > legend, .field-label { font-weight: 700; font-size: 1.05rem; padding: 0; }
.step { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--nm-ink, #141920); color: var(--nm-bg, #fff); font: 900 .95rem/1 var(--nm-display, Impact, sans-serif); margin-right: .45rem; vertical-align: 1px; }
.opt { font-weight: 400; color: var(--nm-muted, #536070); font-size: .9rem; }
.nag-form input[type="text"], .nag-form input[type="url"], .nag-form select, .nag-form textarea,
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form select, .contact-form textarea {
  font: inherit; color: var(--nm-ink, #141920); background: var(--nm-surface, #fff); border: 1.5px solid var(--nm-field-line, #8592a3); border-radius: 8px; padding: .7rem .8rem; width: 100%; box-sizing: border-box; }
.nag-form textarea, .contact-form textarea { min-height: 9rem; resize: vertical; }
.nag-form :focus-visible, .contact-form :focus-visible { outline: 3px solid var(--nm-focus, #e08a00); outline-offset: 1px; }
[aria-invalid="true"] { border-color: var(--nm-bad, #b23a2e) !important; }
.err, .form-err { color: var(--nm-bad, #b23a2e); font-size: .875rem; font-weight: 700; }
.form-err { font-size: 1rem; margin: 0; }
.choices { display: grid; gap: .5rem; }
.choices.row { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span { display: block; border: 1.5px solid var(--nm-field-line, #8592a3); border-radius: 10px; padding: .7rem .9rem; background: var(--nm-surface, #fff); }
.choice input:checked + span { border-color: var(--nm-ink, #141920); background: var(--nm-surface-2, #e3e8ee); box-shadow: inset 0 0 0 1px var(--nm-ink, #141920); }
.choice input:focus-visible + span { outline: 3px solid var(--nm-focus, #e08a00); outline-offset: 2px; }
.choice small { display: block; color: var(--nm-muted, #536070); }
.drop { border: 2px dashed var(--nm-field-line, #8592a3); border-radius: 10px; padding: 1.2rem; display: grid; gap: .6rem; justify-items: start; background: var(--nm-surface, #fff); }
.drop .preview { max-height: 220px; width: auto; border-radius: 8px; }
.check { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; background: var(--nm-surface, #fff); border: 1.5px solid var(--nm-field-line, #8592a3); border-radius: 10px; padding: .9rem; font-weight: 400; }
.check input { width: 1.3rem; height: 1.3rem; margin-top: .15rem; accent-color: var(--nm-good, #2f7d4f); }
.counter { font-size: .8rem; color: var(--nm-muted, #536070); justify-self: end; font-variant-numeric: tabular-nums; }
.submit-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.nag-success { background: var(--nm-surface, #fff); border: 2px solid var(--nm-good, #2f7d4f); border-radius: 10px; padding: 1.4rem; display: grid; gap: .8rem; max-width: 720px; }
.nag-success h2 { color: var(--nm-good, #2f7d4f); margin: 0; }

/* Music bar */
.music-panel { background: var(--nm-film-bg, #0d1a26); color: var(--nm-film-ink, #f3efe4); }
.music-panel__inner { max-width: 1120px; margin-inline: auto; padding: .8rem max(16px, env(safe-area-inset-right, 0px)) .8rem max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
.music-panel iframe { width: 100%; max-width: 660px; height: 175px; border: 0; border-radius: 10px; overflow: hidden; }
.am-player { display: flex; align-items: center; gap: .75rem; }
.am-art { width: 44px; height: 44px; border-radius: 8px; background: var(--nm-postit, #f6cf45); color: var(--nm-postit-ink, #2a2310); display: grid; place-items: center; font-size: 1.4rem; }
.am-meta { display: grid; line-height: 1.25; } .am-meta span { opacity: .75; }
.am-listen { color: var(--nm-postit, #f6cf45); font-weight: 700; }