/* Mystery of the day (/mystery-of-the-day/, site/sections/motd.py + motd.js). Vote widget styles come from report.css. */
.motd-head .wrap { padding-top: clamp(1.4rem, 4vw, 2.6rem); padding-bottom: 1.6rem; padding-left: max(clamp(16px, 3vw, 28px), env(safe-area-inset-left)); padding-right: max(clamp(16px, 3vw, 28px), env(safe-area-inset-right)); }
.motd-switch { color: var(--muted-d); font-size: .95rem; margin: 0; }
.motd-body .wrap { padding-top: 1.4rem; padding-bottom: calc(2.4rem + env(safe-area-inset-bottom)); padding-left: max(clamp(16px, 3vw, 28px), env(safe-area-inset-left)); padding-right: max(clamp(16px, 3vw, 28px), env(safe-area-inset-right)); max-width: 880px; }
.motd-date { font: 700 .85rem var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted-l); margin: 0 0 .6rem; }

.motd-card { background: #fff; border: 1px solid var(--mist-2); border-radius: var(--r-md); padding: 1rem; display: grid; gap: .9rem 1.2rem;
  grid-template-columns: 1fr; box-shadow: 0 2px 10px rgba(19, 38, 31, .06); }
.motd-today { border-top: 6px solid var(--lantern); }
@media (min-width: 680px) {
  .motd-card { grid-template-columns: 200px 1fr; padding: 1.3rem; }
  .motd-card > .motd-art { grid-row: span 2; }
  .motd-today > .motd-vote, .motd-today > .motd-key, .motd-today > .motd-spoil { grid-column: 1 / -1; }
  .motd-small { grid-template-columns: 140px 1fr; }
  .motd-small > .motd-verdict { grid-column: 1 / -1; }
}
.motd-art { display: block; width: 100%; max-width: 220px; aspect-ratio: 1; margin: 0 auto; }
.motd-art svg { display: block; width: 100%; height: 100%; }
.motd-art-sm { max-width: 150px; }
.motd-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 4px solid #F3E3B8; box-sizing: border-box; }
.motd-blank { display: grid; place-items: center; border-radius: 10px; background: var(--spruce-2); color: var(--lantern); font: 700 4rem var(--display); }
.motd-txt h2, .motd-txt h3 { color: var(--spruce); margin: .2rem 0 .5rem; }
.motd-txt h2 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); }
.motd-meta { margin: 0; color: var(--muted-l); font-size: .95rem; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .45rem; }
.motd-place { margin: .25rem 0 0; color: var(--muted-l); font-size: .95rem; }
.motd-sum { font-size: 1.12rem; margin: 0; }
.motd-kind, .motd-st { display: inline-block; font: 700 .78rem/1 var(--body); padding: .38rem .6rem; border-radius: 999px; letter-spacing: .02em; white-space: nowrap; }
.motd-kind { background: var(--spruce); color: #F3F1DA; }
.motd-kind.k-ce { background: #3F3A73; }
.motd-kind.k-uf { background: #23466B; }
.motd-st { background: #EEF1EC; color: var(--ink); border: 1px solid #B9C7BE; }
.motd-st.st-unexplained { background: #FFF1D3; border-color: #E7B957; }
.motd-st.st-disputed { background: #F7E6DD; border-color: #D9A28A; }
.motd-st.st-solved, .motd-st.st-explained { background: #DFF0E5; border-color: #8CC2A0; }
.motd-st.st-hoax { background: #F6DCDC; border-color: #D88D8D; }
.motd-st.st-legend { background: #ECE4F6; border-color: #B7A1D6; }

.motd-vote .vote { margin: 0; }
.motd-vote > .vote-h strong { font: 700 1.15rem var(--display); color: var(--spruce); }
.motd-noscript, .motd-wait { color: var(--muted-l); margin: 0; }
.motd-key { font-size: .92rem; color: var(--muted-l); margin: 0; }
.motd-spoil { font-size: .95rem; margin: 0; }

.motd-yest { margin-top: 2.4rem; }
.motd-yest h2, .motd-arc h2, .motd-how h2 { margin-top: 0; }
.motd-verdict { border-top: 1px solid var(--mist-2); padding-top: .8rem; }
.motd-verdict h4 { font: 700 1rem var(--display); color: var(--spruce); margin: .4rem 0 .4rem; }
.motd-verdict p { margin: 0 0 .6rem; }
.motd-verdict .motd-st { margin-right: .3rem; }
.motd-results { margin-bottom: .8rem; }
.motd-more { margin: .4rem 0 0 !important; }
.motd-more .btn { min-height: 48px; }

.motd-arc { margin-top: 2.4rem; }
.motd-list { list-style: none; padding: 0; margin: 0; background: #fff; border: 1px solid var(--mist-2); border-radius: var(--r-md); overflow: hidden; }
.motd-list li { display: grid; grid-template-columns: 4.2rem 1fr; gap: .15rem .8rem; padding: .75rem 1rem; border-top: 1px solid var(--mist-2); align-items: baseline; }
.motd-list li:first-child { border-top: 0; }
.motd-day { font: 700 .85rem var(--body); color: var(--muted-l); text-transform: uppercase; letter-spacing: .04em; grid-row: span 2; }
.motd-list a { font-weight: 700; font-size: 1.05rem; padding: .2rem 0; }
.motd-arc-meta { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.motd-arc-vote { font-size: .85rem; color: var(--muted-l); font-weight: 600; }
.motd-arc-vote:not(:empty)::before { content: "Readers: "; font-weight: 400; }

.motd-how { margin-top: 2.4rem; background: #fff; border-left: 6px solid var(--spruce-3); border-radius: var(--r-md); padding: 1rem 1.2rem; }
.motd-how p:last-child { margin-bottom: 0; }