/* The What's new page (see Pages/Docs/_WhatsNew.cshtml): a feed of cards, each with a small drawn picture. Dark, like the rest of the site. */
.wn { --wn-line: rgba(255, 255, 255, 0.09); --wn-line2: rgba(255, 255, 255, 0.16); --wn-mute: #9d9daa; --wn-s1: #131318; --wn-s2: #1a1a20; --wn-o: var(--sigil-accent-1, #f97316); max-width: 76rem; margin: 0 auto; padding: 0 0 3rem; display: grid; gap: 1.1rem; }
.wn-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 0.8rem 1.5rem; }
.wn-head h1 { margin: 0; font-size: 2rem; letter-spacing: -0.04em; }
.wn-sub { margin: 0; color: var(--wn-mute); }
.wn-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wn-filters[hidden] { display: none; }
.wn-filter { padding: 0.2rem 0.85rem; border-radius: 999px; border: 1px solid var(--wn-line2); background: transparent; color: var(--wn-mute); }
.wn-filter:hover { color: #fff; }
.wn-filter.is-on { background: rgba(127, 127, 127, 0.25); color: #fff; }

.wn-tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.1rem 0.5rem; border-radius: 6px; }
.wn-tag-new { background: rgba(249, 115, 22, 0.16); color: #fbbf24; }
.wn-tag-better { background: rgba(96, 165, 250, 0.16); color: #60a5fa; }
.wn-tag-supporter { background: rgba(167, 139, 250, 0.18); color: #a78bfa; }
.wn-tag-fix { background: rgba(52, 211, 153, 0.16); color: #34d399; }

.wn-latest { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.4rem; align-items: center; padding: 1.2rem; border-radius: 22px; border: 1px solid rgba(249, 115, 22, 0.35); background: linear-gradient(135deg, #221509, var(--wn-s1) 55%); }
.wn-latest h2 { margin: 0.4rem 0; font-size: 1.6rem; letter-spacing: -0.03em; }
.wn-latest .wn-body { color: var(--wn-mute); }
.wn-meta { margin: 0; display: flex; align-items: center; gap: 0.6rem; }
.wn-month-label { color: var(--wn-mute); font-size: 0.85rem; }
.wn-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.wn-actions [hidden] { display: none; }

.wn-month { margin: 0.6rem 0 0; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wn-mute); font-weight: 600; }
.wn-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wn-c { display: grid; gap: 0.6rem; align-content: start; padding: 0.7rem; border-radius: 18px; border: 1px solid var(--wn-line); background: var(--wn-s1); }
.wn-c:target, .wn-latest:target { outline: 2px solid var(--wn-o); outline-offset: 3px; }
.wn-c h3 { margin: 0; font-size: 1.02rem; letter-spacing: -0.02em; }
.wn-c .wn-body { color: var(--wn-mute); font-size: 0.9rem; }
.wn-body p { margin: 0 0 0.4rem; }
.wn-body p:last-child { margin-bottom: 0; }
.wn-body a { color: var(--wn-o); }
.wn-row { display: flex; justify-content: space-between; align-items: center; min-height: 1.5rem; }
.wn-copy { border: 0; background: none; color: var(--wn-mute); padding: 0.1rem 0.3rem; border-radius: 8px; }
.wn-copy:hover { color: #fff; }
.wn-copy[hidden] { display: none; }
.wn-see { color: var(--wn-o); font-size: 0.9rem; }
.wn-c.is-hidden, .wn-latest.is-hidden, .wn-month.is-hidden { display: none; }
.wn-empty { color: var(--wn-mute); }
.wn-toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); padding: 0.5rem 1rem; border-radius: 999px; background: #26262c; color: #fff; border: 1px solid var(--wn-line2); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); z-index: 1060; }
.wn-toast[hidden] { display: none; }

/* A long update shows its first lines and a "Read more" (only when the script is there to open it). */
.wn-js .wn-c .wn-body.is-clamped { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.wn-more { border: 0; background: none; color: var(--wn-o); padding: 0; justify-self: start; font-size: 0.85rem; }

/* ---- the little pictures: a drawn piece of the feature, 16:9 ---- */
.wn-pic { aspect-ratio: 16 / 9; border-radius: 14px; position: relative; overflow: hidden; display: grid; place-content: center; justify-items: center; gap: 0.5rem; padding: 0.8rem; border: 1px solid var(--wn-line); }
.wn-p1 { background: radial-gradient(120% 100% at 20% 0, #2b1a3f, #14101c 70%); }
.wn-p2 { background: radial-gradient(120% 100% at 80% 0, #123036, #0f1618 70%); }
.wn-p3 { background: radial-gradient(120% 100% at 20% 0, #3b1f0c, #17110c 70%); }
.wn-p4 { background: radial-gradient(120% 100% at 80% 0, #1b2a45, #10141c 70%); }
.wn-p5 { background: radial-gradient(120% 100% at 20% 0, #1f3a22, #101712 70%); }
.wn-p6 { background: radial-gradient(120% 100% at 80% 0, #3b1230, #170f15 70%); }
.wn-msg { width: 100%; max-width: 21rem; background: #1c1c22; border-radius: 12px; padding: 0.6rem 0.75rem; display: flex; gap: 0.6rem; font-size: 0.78rem; color: #dcdce4; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.wn-msg b { color: #fff; }
.wn-av { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: linear-gradient(135deg, #f97316, #fbbf24); flex: none; display: block; }
.wn-av2 { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.wn-bot { background: #4752c4; color: #fff; font-size: 0.55rem; padding: 0 0.3rem; border-radius: 3px; margin-left: 0.25rem; vertical-align: 1px; }
.wn-m { background: rgba(88, 101, 242, 0.3); color: #c9cdfb; border-radius: 3px; padding: 0 0.15rem; }
.wn-card { width: 100%; max-width: 19rem; background: #1c1c22; border-radius: 12px; padding: 0.55rem 0.8rem; font-size: 0.78rem; color: #b9b9c4; border-left: 4px solid #f97316; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.wn-card b { display: block; color: #fff; }
.wn-prof { display: flex; gap: 0.7rem; align-items: center; border-left: 0; }
.wn-prof .wn-av { width: 2.6rem; height: 2.6rem; }
.wn-rows { width: 100%; max-width: 19rem; display: grid; gap: 0.35rem; }
.wn-rows div { background: #1c1c22; border-radius: 10px; padding: 0.4rem 0.7rem; display: flex; justify-content: space-between; font-size: 0.78rem; color: #dcdce4; }
.wn-rows span { color: #fbbf24; font-weight: 700; }
.wn-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.wn-chips i { font-style: normal; font-size: 0.68rem; padding: 0.05rem 0.5rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); color: #d4d4dc; }
.wn-btns { display: flex; gap: 0.4rem; }
.wn-btns i { font-style: normal; font-size: 0.7rem; padding: 0.15rem 0.6rem; border-radius: 6px; background: #4e5058; color: #fff; }
.wn-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; width: 100%; max-width: 8.5rem; }
.wn-tiles i { aspect-ratio: 1; border-radius: 8px; display: block; }
.wn-tiles .g { background: #22c55e; }
.wn-tiles .y { background: #eab308; }
.wn-tiles .n { background: #3a3a44; }
.wn-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.35rem; width: 100%; max-width: 12rem; }
.wn-swatches i { aspect-ratio: 1; border-radius: 50%; display: block; }
.wn-live { width: 100%; max-width: 17rem; background: #1c1c22; border-radius: 12px; overflow: hidden; font-size: 0.78rem; color: #dcdce4; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.wn-live div { height: 3.4rem; background: linear-gradient(135deg, #7c3aed, #db2777); }
.wn-live p { margin: 0; padding: 0.5rem 0.75rem; }
.wn-live b { color: #ef4444; margin-right: 0.3rem; font-size: 0.68rem; }
.wn-page { width: 100%; max-width: 15rem; display: grid; gap: 0.4rem; justify-items: start; }
.wn-page i { display: block; height: 0.55rem; width: 100%; border-radius: 99px; background: rgba(255, 255, 255, 0.14); }
.wn-page i.s { width: 60%; }
.wn-page b { margin-top: 0.3rem; background: #f97316; color: #1a0d02; font-size: 0.72rem; padding: 0.2rem 0.8rem; border-radius: 8px; }
.wn-vibe { display: flex; align-items: center; gap: 0.7rem; }
.wn-vibe .wn-av { width: 2.8rem; height: 2.8rem; }
.wn-vibe span { font-weight: 800; font-size: 1.5rem; color: #fbbf24; }

@media (max-width: 991.98px) {
  .wn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .wn-grid, .wn-latest { grid-template-columns: minmax(0, 1fr); }
  .wn-head h1 { font-size: 1.7rem; }
}

/* Like and dislike on every update. */
.wn-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.wn-vote { display: inline-flex; margin-left: auto; }
.wn-vote-form { display: flex; gap: 0.35rem; margin: 0; }
.wn-vote-btn { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 1.8rem; padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px solid var(--wn-line2); background: transparent; color: var(--wn-mute); font-size: 0.8rem; text-decoration: none; cursor: pointer; }
.wn-vote-btn:hover { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.wn-vote-btn.is-on { color: #fff; border-color: var(--wn-o); background: rgba(249, 115, 22, 0.16); }
.wn-vote-down.is-on { border-color: rgba(255, 255, 255, 0.45); background: rgba(127, 127, 127, 0.25); }
.wn-i { width: 15px; height: 15px; flex: none; }
.wn-vote-down .wn-i { transform: rotate(180deg); }
.wn-actions .wn-vote { margin-left: auto; }