/* Sensational: real or made-up headlines.
   Layout: one phone-width column. A dark press stage where each paper spins in and lands,
   two masthead-shaped sorting buttons under it (red-top tabloid against blackletter
   broadsheet), then the two piles and the verdict as newsprint clippings. */
:root {
  --sn-ground: #e3e5e7;      /* press-room steel */
  --sn-text: #17181a;
  --sn-text-soft: #4b4e52;
  --sn-stage: #222427;
  --sn-stage-spot: #3d4044;
  --sn-shadow: rgba(8, 9, 10, .5);
  --sn-paper: #f2f0ea;       /* newsprint stays light in both themes: it's an object */
  --sn-paper-ink: #151412;
  --sn-paper-soft: #615c55;
  --sn-paper-rule: #b3aea4;
  --sn-red: #c90f1c;         /* red-top masthead */
  --sn-red-text: #a30d18;    /* small red type on newsprint */
  --sn-on-red: #ffffff;
  --sn-right: #1b6a36;
  --sn-mark-new: #f6c4c8;
  --sn-mark-old: #cfe4d4;
  --sn-focus: #1d5fd1;
  --sn-display: "League Gothic", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --sn-body: "Newsreader", Georgia, "Times New Roman", serif;
  --sn-mast: "UnifrakturMaguntia", "Old English Text MT", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sn-ground: #0e1011; --sn-text: #e8e7e3; --sn-text-soft: #a3a19b;
    --sn-stage: #040506; --sn-stage-spot: #222528; --sn-shadow: rgba(0, 0, 0, .85);
    --sn-paper: #e7e4dd; --sn-paper-rule: #a9a49a; --sn-red: #d41c28; --sn-focus: #8ab6ff;
  }
}

body.sn-page { background: var(--sn-ground); }
main.sn { max-width: 34rem; padding-top: 1.5rem; }
.sn { color: var(--sn-text); font-family: var(--sn-body); line-height: 1.5; -webkit-font-smoothing: antialiased; }
.sn *, .sn *::before, .sn *::after { box-sizing: border-box; }
.sn [hidden] { display: none !important; }
.sn button { font: inherit; }
.sn :focus-visible { outline: 3px solid var(--sn-focus); outline-offset: 3px; }
.sn [tabindex="-1"]:focus { outline: none; }
.sn-screen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; scroll-margin-top: 12px; }
/* Spinning papers and slamming stamps never make the page scroll sideways */
#press, #verdict { overflow-x: clip; }

/* Newsprint and mastheads */
.sn-paper { background: var(--sn-paper); color: var(--sn-paper-ink); box-shadow: 0 1px 1px var(--sn-shadow), 0 22px 44px -26px var(--sn-shadow); }
.sn-mast { display: grid; gap: 4px; text-align: center; }
.sn-mast-ears {
  display: flex; justify-content: space-between; gap: 12px; margin: 0;
  font-family: var(--sn-display); text-transform: uppercase; letter-spacing: .1em;
  font-size: .95rem; color: var(--sn-paper-soft);
}
.sn-mast-title {
  margin: 0; font-family: var(--sn-mast); font-weight: 400; line-height: 1; letter-spacing: 0;
  font-size: clamp(2.5rem, 12vw, 3.4rem);
}
.sn-dateline {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px; margin: 0;
  padding-block: 5px 4px; border-top: 1px solid var(--sn-paper-ink); border-bottom: 3px double var(--sn-paper-ink);
  font-family: var(--sn-display); text-transform: uppercase; letter-spacing: .09em; font-size: .95rem;
}
.sn-kicker {
  margin: 0; font-family: var(--sn-display); text-transform: uppercase;
  letter-spacing: .14em; font-size: 1.05rem; line-height: 1.2; color: var(--sn-red-text);
}

/* Front page */
.sn-front { padding: 14px 18px 22px; display: grid; gap: 14px; }
.sn-splash {
  margin: 0; font-family: var(--sn-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0;
  line-height: .88; font-size: clamp(3.6rem, 19vw, 5.6rem); text-wrap: balance;
}
.sn-standfirst { margin: 0; font-size: 1.2rem; line-height: 1.4; }
.sn-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.sn-steps li::marker { font-family: var(--sn-display); color: var(--sn-red-text); }
.sn-fine { margin: 0; font-style: italic; color: var(--sn-paper-soft); }
.sn-note { margin: 0; font-size: .92rem; color: var(--sn-text-soft); }

.sn-cta {
  appearance: none; border: 0; cursor: pointer; justify-self: start;
  font-family: var(--sn-display); text-transform: uppercase; letter-spacing: .07em;
  font-size: 1.7rem; line-height: 1; padding: 14px 22px 11px;
  background: var(--sn-text); color: var(--sn-ground);
}
.sn-paper .sn-cta { background: var(--sn-paper-ink); color: var(--sn-paper); }
.sn-cta.sn-quiet { background: transparent; color: var(--sn-text); box-shadow: inset 0 0 0 2px var(--sn-text); }
.sn-cta:active { transform: translateY(1px); }
.sn-cta:disabled { opacity: .5; cursor: default; }

/* The press */
.sn-press-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; margin: 0;
  font-family: var(--sn-display); text-transform: uppercase; letter-spacing: .09em;
  font-size: 1.15rem; color: var(--sn-text-soft);
}
.sn-stage {
  position: relative; display: grid; place-items: center;
  height: clamp(19rem, 56vh, 31rem); padding: 14px;
  background: radial-gradient(ellipse at 50% 42%, var(--sn-stage-spot), var(--sn-stage) 70%);
}
.sn-sheet {
  position: relative; z-index: 2; width: min(100%, 23rem); max-height: 100%; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px; padding: 10px 14px 14px;
  transform: rotate(var(--tilt, -1deg));
}
.sn-sheet .sn-mast-title { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
.sn-sheet .sn-dateline { font-size: .85rem; }
.sn-sheet .sn-kicker { font-size: .95rem; }
.sn-sheet-hl {
  margin: 0; font-family: var(--sn-body); font-weight: 800; line-height: 1.03; letter-spacing: -.012em;
  font-size: calc(var(--hl-scale, 1) * clamp(1.85rem, 8vw, 2.6rem)); text-wrap: balance;
}
.sn-sheet-body { flex: 0 1 5.5rem; min-height: 0; display: grid; grid-template-columns: 5fr 4fr; gap: 10px; }
.sn-halftone {
  border: 1px solid var(--sn-paper-rule);
  background:
    radial-gradient(ellipse at 38% 42%, transparent 0 22%, var(--sn-paper) 80%),
    radial-gradient(circle, var(--sn-paper-ink) 1.1px, transparent 1.5px) 0 0 / 5px 5px;
}
.sn-lines { background: repeating-linear-gradient(to bottom, var(--sn-paper-rule) 0 2px, transparent 2px 7px); }

.sn-sorters { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sn-sorter {
  position: relative; min-width: 0; overflow: hidden; appearance: none; border: 0; cursor: pointer; min-height: 5.5rem;
  padding: 12px 8px 10px; display: grid; align-content: center; justify-items: center; gap: 3px;
  text-align: center; transition: opacity .2s;
}
.sn-sorter:active:not(:disabled) { transform: translateY(2px); }
.sn-sorter:disabled { opacity: .38; cursor: default; }
.sn-sorter.sn-sens { background: var(--sn-red); color: var(--sn-on-red); }
.sn-sorter.sn-rev { background: var(--sn-paper); color: var(--sn-paper-ink); box-shadow: inset 0 0 0 2px var(--sn-paper-ink); }
.sn-sorter-name { max-width: 100%; line-height: 1; overflow-wrap: anywhere; }
.sn-sens .sn-sorter-name { font-family: var(--sn-display); text-transform: uppercase; letter-spacing: .04em; font-size: clamp(1.8rem, 8vw, 2.4rem); }
.sn-rev .sn-sorter-name { font-family: var(--sn-mast); font-size: clamp(1.5rem, 6.6vw, 2.05rem); }
.sn-sorter-sub { font-style: italic; font-size: .98rem; line-height: 1.1; }
.sn-sorter-count {
  display: inline-block; min-width: .8em; font-style: normal;
  font-family: var(--sn-display); font-size: 1.2rem; line-height: 1; font-variant-numeric: tabular-nums;
}
.sn-keys { margin: 0; text-align: center; font-size: .88rem; color: var(--sn-text-soft); }
@media (hover: none) { .sn-keys { display: none; } }

/* Piles and verdict */
.sn-screen-head { display: grid; gap: 6px; }
.sn-screen-head h2 {
  margin: 0; font-family: var(--sn-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0;
  font-size: clamp(2.8rem, 13vw, 3.8rem); line-height: .92;
}
.sn-screen-head .sn-kicker { color: var(--sn-text-soft); }
.sn-screen-head p { margin: 0; }
.sn-piles { display: grid; gap: 18px; }
.sn-pile { display: grid; gap: 8px; }
.sn-pile-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0; padding: 9px 12px 7px; font-weight: 400; line-height: 1; }
.sn-pile-head small { font-family: var(--sn-body); font-style: italic; font-size: 1rem; }
.sn-pile-head.sn-sens { background: var(--sn-red); color: var(--sn-on-red); font-family: var(--sn-display); text-transform: uppercase; letter-spacing: .04em; font-size: 1.8rem; }
.sn-pile-head.sn-rev { background: var(--sn-paper); color: var(--sn-paper-ink); font-family: var(--sn-mast); font-size: 1.6rem; box-shadow: inset 0 0 0 2px var(--sn-paper-ink); }
.sn-clips { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sn-clip { background: var(--sn-paper); color: var(--sn-paper-ink); padding: 12px 14px 14px; display: grid; gap: 10px; }
.sn-clip-hl { margin: 0; font-weight: 700; font-size: 1.15rem; line-height: 1.25; text-wrap: pretty; }
.sn-move {
  justify-self: start; appearance: none; cursor: pointer; min-height: 44px; padding: 8px 12px 6px;
  background: transparent; color: var(--sn-paper-ink); border: 1.5px solid var(--sn-paper-ink);
  font-family: var(--sn-display); text-transform: uppercase; letter-spacing: .07em; font-size: 1.1rem; line-height: 1;
}
.sn-empty { padding: 4px 2px; font-style: italic; color: var(--sn-text-soft); }

.sn-verdict-front { padding: 14px 18px 20px; display: grid; gap: 10px; }
.sn-score { margin: 0; font-family: var(--sn-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0; line-height: .85; font-size: clamp(4.2rem, 23vw, 6.8rem); }
.sn-rank { margin: 0; font-weight: 800; font-size: 1.55rem; line-height: 1.15; }
.sn-breakdown { margin: 0; }
.sn-lesson { margin: 0; font-style: italic; }
.sn-results-head { margin: 4px 0 0; font-family: var(--sn-display); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; font-size: 1.4rem; }
.sn-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sn-result-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sn-call { margin: 0; font-family: var(--sn-display); text-transform: uppercase; letter-spacing: .06em; font-size: 1.1rem; line-height: 1.1; }
.sn-call.sn-right { color: var(--sn-right); }
.sn-call.sn-wrong { color: var(--sn-red-text); }
.sn-stamp {
  flex: none; font-family: var(--sn-display); text-transform: uppercase; letter-spacing: .1em;
  font-size: 1.35rem; line-height: 1; padding: 5px 10px 3px; border: 3px solid currentColor;
  transform: rotate(-6deg);
  animation: sn-stamp 320ms cubic-bezier(.2, 1.5, .45, 1) both; animation-delay: calc(var(--i, 0) * 160ms + 150ms);
}
.sn-stamp-fake { color: var(--sn-red-text); }
.sn-stamp-real { color: var(--sn-paper-ink); }
.sn-truth { margin: 0; font-size: .98rem; color: var(--sn-paper-soft); }
.sn-truth q { color: var(--sn-paper-ink); }
.sn-truth a { color: var(--sn-paper-ink); font-weight: 700; text-underline-offset: 2px; }
.sn mark { color: inherit; padding: 0 2px; }
.sn mark.sn-new { background: var(--sn-mark-new); }
.sn mark.sn-old { background: var(--sn-mark-old); }

/* Sharing: the message as friends will see it, then one tap per app */
.sn-share { display: grid; gap: 12px; }
.sn-share-toggle, .sn-share-main { justify-self: stretch; text-align: center; text-decoration: none; }
.sn-share-panel { display: grid; gap: 12px; padding: 14px; box-shadow: inset 0 0 0 2px var(--sn-text); }
.sn-share-label {
  margin: 0; font-family: var(--sn-display); text-transform: uppercase; letter-spacing: .1em;
  font-size: 1.05rem; line-height: 1.2; color: var(--sn-text-soft);
}
.sn-bubble {
  justify-self: start; max-width: 100%; margin: 0; padding: 10px 13px;
  background: var(--sn-paper); color: var(--sn-paper-ink); border-radius: 16px 16px 16px 4px;
  font: 1rem/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.sn-share-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sn-share-link {
  display: grid; place-items: center; min-width: 0; min-height: 46px; padding: 8px 4px 6px; overflow: hidden;
  appearance: none; cursor: pointer; border: 0; background: transparent; color: var(--sn-text);
  box-shadow: inset 0 0 0 1.5px var(--sn-text); text-decoration: none; text-align: center; overflow-wrap: anywhere;
  font-family: var(--sn-display); text-transform: uppercase; letter-spacing: .05em;
  font-size: clamp(1.05rem, 4.6vw, 1.2rem); line-height: 1;
}
.sn-share-link:active, .sn-share-main:active { transform: translateY(1px); }
.sn-share-card { margin: 0; display: grid; gap: 8px; }
.sn-share-card img { display: block; width: min(100%, 17rem); height: auto; box-shadow: 0 14px 30px -18px var(--sn-shadow); }
.sn-share-card figcaption { font-size: .92rem; color: var(--sn-text-soft); }
.sn-share-status { margin: 0; min-height: 1.4em; font-size: .95rem; color: var(--sn-text-soft); }
#copy-text {
  width: 100%; min-height: 6.5rem; padding: 10px; resize: vertical;
  background: var(--sn-paper); color: var(--sn-paper-ink); border: 1px solid var(--sn-paper-rule);
  font: 1rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Motion */
.sn-sheet.sn-spin { animation: sn-spin-in 1100ms cubic-bezier(.13, .72, .24, 1) both; }
.sn-sheet.sn-landed { animation: sn-slam 260ms ease-out both; }
.sn-sheet.sn-fly-sens { animation: sn-fly-sens 420ms cubic-bezier(.55, 0, .85, .35) both; }
.sn-sheet.sn-fly-rev { animation: sn-fly-rev 420ms cubic-bezier(.55, 0, .85, .35) both; }
.sn-stage.sn-shake { animation: sn-shake 300ms linear; }
.sn-sorter-count.sn-bump { animation: sn-bump 300ms ease-out; }
@keyframes sn-spin-in {
  0% { transform: rotate(-1080deg) scale(.03); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: rotate(var(--tilt, -1deg)) scale(1); opacity: 1; }
}
@keyframes sn-slam {
  0% { transform: rotate(var(--tilt, -1deg)) scale(1.06); }
  60% { transform: rotate(var(--tilt, -1deg)) scale(.985); }
  100% { transform: rotate(var(--tilt, -1deg)) scale(1); }
}
@keyframes sn-fly-sens { to { transform: translate(-27%, 74%) rotate(-30deg) scale(.16); opacity: 0; } }
@keyframes sn-fly-rev { to { transform: translate(27%, 74%) rotate(30deg) scale(.16); opacity: 0; } }
@keyframes sn-shake {
  0%, 100% { transform: none; }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(5px, -2px); }
  60% { transform: translate(-3px, 1px); }
  80% { transform: translate(2px, 0); }
}
@keyframes sn-bump { 50% { transform: scale(1.45); } }
@keyframes sn-stamp {
  0% { transform: rotate(-14deg) scale(2.3); opacity: 0; }
  100% { transform: rotate(-6deg) scale(1); opacity: 1; }
}
@keyframes sn-fade-in { from { opacity: 0; } }
@keyframes sn-fade-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sn-sheet.sn-spin { animation: sn-fade-in 200ms ease-out both; }
  .sn-sheet.sn-landed, .sn-stage.sn-shake, .sn-sorter-count.sn-bump, .sn-stamp { animation: none; }
  .sn-sheet.sn-fly-sens, .sn-sheet.sn-fly-rev { animation: sn-fade-out 150ms ease-in both; }
}