/* share.css: permalink / result page. Mobile first, logical properties only. */

.permalink { display: grid; gap: var(--space-4); max-inline-size: 48rem; margin-inline: auto; }

/* ---------- post: a channel post on messenger wallpaper (the parodied original) ---------- */
.channel {
  --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' fill='none' stroke='%23151412' stroke-opacity='.13' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 34 28 8l14 26M10 34h36'/%3E%3Cpath d='M78 22q14-12 28 0-14 12-28 0z'/%3E%3Ccircle cx='92' cy='22' r='3'/%3E%3Cpath d='M22 84q0-12 12-12t12 11q0 7-11 10v7'/%3E%3Ccircle cx='35' cy='108' r='1'/%3E%3Cpath d='M100 74v22'/%3E%3Ccircle cx='100' cy='106' r='1'/%3E%3Cpath d='m70 128 7-15h-7l7-15'/%3E%3Cpath d='M118 120a8 8 0 1 0 0-1'/%3E%3C/svg%3E");
  padding: var(--space-3) var(--space-3) var(--space-4);
  padding-inline-start: calc(var(--space-3) + 0.75rem);
  border: 2px solid var(--color-ink);
  background-color: color-mix(in srgb, var(--color-marker) 22%, var(--color-bg));
  background-image: var(--doodle);
}
/* Wallpaper tinted in the post's spectrum colour. */
.channel[data-tone="braun"] { background-color: color-mix(in srgb, #8d6e63 22%, var(--color-bg)); }
.channel[data-tone="rot"] { background-color: color-mix(in srgb, #e53935 18%, var(--color-bg)); }
.channel[data-tone="weiss"] { background-color: color-mix(in srgb, #a7b6bf 28%, var(--color-bg)); }
.channel[data-tone="gruen"] { background-color: color-mix(in srgb, #43a047 20%, var(--color-bg)); }
.channel[data-tone="blau"] { background-color: color-mix(in srgb, #1e88e5 18%, var(--color-bg)); }
.channel[data-tone="regenbogen"] { background-color: var(--color-bg); background-image: var(--doodle), linear-gradient(135deg, color-mix(in srgb, #e53935 16%, transparent), color-mix(in srgb, #f5c542 18%, transparent), color-mix(in srgb, #43a047 16%, transparent), color-mix(in srgb, #1e88e5 16%, transparent), color-mix(in srgb, #8e24aa 16%, transparent)); }
@media (prefers-color-scheme: dark) {
  .channel { --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' fill='none' stroke='%23f1ece0' stroke-opacity='.09' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 34 28 8l14 26M10 34h36'/%3E%3Cpath d='M78 22q14-12 28 0-14 12-28 0z'/%3E%3Ccircle cx='92' cy='22' r='3'/%3E%3Cpath d='M22 84q0-12 12-12t12 11q0 7-11 10v7'/%3E%3Ccircle cx='35' cy='108' r='1'/%3E%3Cpath d='M100 74v22'/%3E%3Ccircle cx='100' cy='106' r='1'/%3E%3Cpath d='m70 128 7-15h-7l7-15'/%3E%3Cpath d='M118 120a8 8 0 1 0 0-1'/%3E%3C/svg%3E"); background-color: #23211d; }
}
.post {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  border: 2px solid var(--color-ink);
  border-radius: 1rem;
  border-start-start-radius: 0;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-hard-lg);
}
/* Bubble tail at the start edge (ink outline + paper fill), mirrored for RTL posts. */
.post::before, .post::after {
  content: "";
  position: absolute;
  inset-block-start: -2px;
  inset-inline-start: -0.95rem;
  inline-size: 0.95rem;
  block-size: 1rem;
  background: var(--color-ink);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.post::after { inset-block-start: 0; inset-inline-start: calc(-0.95rem + 4px); background: var(--color-surface); }
.post[dir="rtl"]::before, .post[dir="rtl"]::after { transform: scaleX(-1); }
@media (min-width: 600px) { .post { padding-inline: var(--space-4); } }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.post__meta .avatar { inline-size: 4rem; block-size: 4rem; flex-shrink: 0; }
.post__by { margin: 0; color: var(--color-muted); font-size: 0.9375rem; flex: 1 1 10rem; }
/* Award chip: medal plus tier name on a soft tint of the tier's metal colour. */
.post__award {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding-block: var(--space-1);
  padding-inline: var(--space-1) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--tier, #9aa3ad) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tier, #9aa3ad) 16%, var(--color-surface));
  line-height: 1.25;
}
.post__award:has(.badge--gold) { --tier: var(--gold); }
.post__award:has(.badge--silber) { --tier: var(--silber); }
.post__award:has(.badge--bronze) { --tier: var(--bronze); }
.post__award:has(.badge--blech) { --tier: var(--blech); }
.post__award:has(.badge--staniol) { --tier: var(--staniol); }
.post__award .badge {
  inline-size: 3rem;
  block-size: 3rem;
  padding: 0;
  font-size: 1.125rem;
  font-weight: 800;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tier, #9aa3ad) 55%, transparent), 0 4px 10px rgb(0 0 0 / 0.2);
}
.post__award-text { display: grid; }
.post__award-text strong { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; letter-spacing: 0.01em; color: var(--color-text); }
.post__award-score { font-size: 0.875rem; color: var(--color-muted); }
@media (max-width: 599px) {
  .post__award { flex: 1 1 100%; gap: var(--space-2); }
  .post__award .badge { inline-size: 2.5rem; block-size: 2.5rem; font-size: 1rem; }
}
.post__headline { margin: 0; font-size: clamp(1.5rem, 1.1rem + 2.4vw, 2.4rem); line-height: 1.15; overflow-wrap: anywhere; }
.post__pic { margin: 0; }
.post__pic img { display: block; inline-size: 100%; block-size: auto; border-radius: calc(var(--radius) / 1.5); }
.post__body p { margin-block: 0 var(--space-2); overflow-wrap: anywhere; }
.post__watermark {
  justify-self: end;
  margin: 0;
  padding: 0.15rem 0.6rem;
  border: 3px double var(--color-accent);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

/* Fact check: the package insert stapled over the bottom of the post. */
.factcheck {
  position: relative;
  z-index: 1;
  margin-block-start: calc(-1 * var(--space-5));
  margin-inline: var(--space-2);
  padding: var(--space-4) var(--space-3) var(--space-3);
  border: 2px solid var(--color-ink);
  background:
    radial-gradient(circle, var(--color-bg) 0.28rem, transparent 0.3rem) 0 0.55rem / 1.1rem 1.1rem repeat-x,
    var(--color-surface);
  box-shadow: var(--shadow-hard);
  transform: rotate(0.6deg);
}
[dir="rtl"] .factcheck { transform: rotate(-0.6deg); }
.factcheck::before {
  /* staple */
  content: "";
  position: absolute;
  inset-block-start: -0.55rem;
  inset-inline-start: 2rem;
  inline-size: 2.5rem;
  block-size: 0.4rem;
  border: 2px solid var(--color-muted);
  border-block-end: 0;
}
.factcheck h2 { margin-block: 0 var(--space-1); font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); text-transform: uppercase; }
.factcheck__intro { margin-block: 0 var(--space-2); font-family: var(--font-mono); font-size: 0.9375rem; font-weight: 700; }
@media (min-width: 600px) { .factcheck { margin-inline: var(--space-5); padding-inline: var(--space-4); } }

.satire-notice { justify-self: center; margin-block: var(--space-2); max-inline-size: 32rem; text-align: center; }

/* ---------- share bar ---------- */
.share { display: grid; gap: var(--space-3); }
.share h2, .share h3 { margin-block: 0; }
.share-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* One plain style for every platform; the brand colour is a small square badge, no stripe. */
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  padding-inline: var(--space-3);
  gap: var(--space-2);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.share-btn::before { content: ""; inline-size: 0.7rem; block-size: 0.7rem; flex-shrink: 0; background: var(--brand, var(--color-ink)); border: 1px solid var(--color-ink); }
.share-btn:hover { background: var(--color-marker); color: var(--color-marker-text); }
.share-btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
/* Brand colours darkened where needed for 4.5:1 contrast with white text. */
.share-btn--facebook { --brand: #1259c3; }
.share-btn--x, .share-btn--threads { --brand: #000000; }
.share-btn--bluesky { --brand: #0560c8; }
.share-btn--mastodon { --brand: #563acc; }
.share-btn--whatsapp { --brand: #0b7466; }
.share-btn--telegram { --brand: #0b6fa4; }
.share-btn--signal { --brand: #2c5fd1; }
.share-btn--reddit { --brand: #b83200; }
.share-btn--linkedin { --brand: #0a66c2; }
.share-btn--pinterest { --brand: #c8001e; }
.share-btn--email, .share-btn--sms { --brand: var(--color-muted); }
.share-btn--native { --brand: var(--color-accent); background: var(--color-accent); color: var(--color-accent-contrast); }
@media (prefers-color-scheme: dark) {
  .share-btn--x, .share-btn--threads { --brand: var(--color-ink); }
}

/* ---------- Facebook group helper ---------- */
.fbgroup { display: grid; gap: var(--space-2); padding: var(--space-3); border: 2px solid var(--color-ink); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow-hard); }
.fbgroup__note { margin: 0; font-size: 0.9375rem; }
.fbgroup__steps { margin: 0; padding-inline-start: 1.5rem; }
.fbgroup__steps li.is-done { font-weight: 700; }
.fbgroup__check { color: #0b6b2e; font-weight: 900; }
@media (prefers-color-scheme: dark) { .fbgroup__check { color: #7ddc9a; } }
.fbgroup__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }

/* ---------- platform tabs (stacked panels without JS) ---------- */
.tabs { display: grid; gap: var(--space-2); }
.tabs__list {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  padding-block-end: var(--space-1);
  scrollbar-width: thin;
}
.tabs__list [role="tab"] {
  flex-shrink: 0;
  min-block-size: 2.75rem;
  padding-inline: var(--space-3);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}
.tabs__list [role="tab"][aria-selected="true"] { background: var(--color-ink); color: var(--color-surface); font-weight: 800; }
.tabs__list [role="tab"]:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.tabs__panel { display: grid; gap: var(--space-1); padding: var(--space-3); border: 2px solid var(--color-ink); border-radius: var(--radius); background: var(--color-surface); }
.tabs.is-enhanced .tabs__panel-title { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tabs__panel-title { margin: 0; }
.share-text {
  inline-size: 100%;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) / 1.5);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 0.9375rem;
  resize: vertical;
}
.share-text--title { min-block-size: 2.75rem; }
.share-text__meta { margin: 0; color: var(--color-muted); font-size: 0.8125rem; }
.share-text__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.howto { margin: 0; padding-inline-start: 1.5rem; }

/* ---------- downloads ---------- */
.downloads { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.downloads li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.downloads__alt { font-size: 0.875rem; }

/* ---------- Mastodon dialog ---------- */
.dialog {
  inline-size: min(28rem, calc(100vi - 2 * var(--space-3)));
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
}
.dialog::backdrop { background: rgb(0 0 0 / 0.55); }
.dialog__form { display: grid; gap: var(--space-2); }
.dialog__form h3 { margin: 0; }
.dialog__form input { min-block-size: 2.75rem; padding-inline: var(--space-2); border: 1px solid var(--color-border); border-radius: calc(var(--radius) / 1.5); font: inherit; background: var(--color-bg); color: var(--color-text); }
.dialog__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.field__error { margin: 0; color: #b3261e; font-weight: 700; }
@media (prefers-color-scheme: dark) { .field__error { color: #f2b8b5; } }

/* Yellow flyer slip at the end. */
.cta {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 2px solid var(--color-ink);
  background: var(--color-marker);
  color: var(--color-marker-text);
  box-shadow: var(--shadow-hard-lg);
}
.cta p { margin: 0; font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 3vw, 2.75rem); line-height: 1.05; text-transform: uppercase; }
@media (prefers-color-scheme: dark) { .cta { box-shadow: calc(var(--sx) * 2) 6px 0 var(--color-accent); } }

@media (min-width: 37.5em) {
  .downloads { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.button--large { min-block-size: 3.25rem; padding-inline: var(--space-4); font-size: 1.125rem; }

/* ---------- creator box (permalink + wizard) ---------- */
.creator-box {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--gold) 14%, var(--color-surface));
}
.creator-box h2, .creator-box p { margin: 0; }
.creator-box h2 { font-size: 1.125rem; }

/* ---------- private statistics ---------- */
.stats { display: grid; gap: var(--space-3); max-inline-size: 48rem; margin-inline: auto; }
.stats h1, .stats h2 { margin: 0; }
.stats__private { margin: 0; color: var(--color-muted); font-size: 0.875rem; }
.stats__post { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.stats__summary { margin: 0; padding: var(--space-3); border: 2px solid var(--color-ink); border-radius: var(--radius); background: var(--color-marker); color: var(--color-marker-text); box-shadow: var(--shadow-hard-lg); font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.stats__level { display: grid; gap: var(--space-1); }
.stats__level progress { inline-size: 100%; block-size: 1.25rem; appearance: none; border: 2px solid var(--color-ink); border-radius: var(--radius); background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--color-ink) calc(10% - 1px) 10%) var(--color-surface); overflow: hidden; }
.stats__level progress::-webkit-progress-bar { background: transparent; }
.stats__level progress::-webkit-progress-value { background: linear-gradient(90deg, #c9d4ff, #f6d3ee, #ffb347); }
.stats__level progress::-moz-progress-bar { background: linear-gradient(90deg, #c9d4ff, #f6d3ee, #ffb347); }
.stats__level h2 { font-size: clamp(1.4rem, 1rem + 2vw, 2rem); text-transform: uppercase; }
.stats__level p { margin: 0; color: var(--color-muted); }
.stats__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.stats__cards li { display: grid; gap: var(--space-1); padding: var(--space-3); border: 2px solid var(--color-ink); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow-hard); }
.stats__cards li:nth-child(odd) { transform: rotate(-1deg); }
.stats__cards li:nth-child(even) { transform: rotate(0.8deg); }
.stats__cards strong { font-family: var(--font-display); font-size: 2.75rem; line-height: 1; color: var(--color-accent); }
.stats__note { margin: 0; color: var(--color-muted); font-size: 0.875rem; }
.stats__table-wrap { overflow-x: auto; }
.stats__table { inline-size: 100%; border-collapse: collapse; }
.stats__table caption { text-align: start; font-weight: 700; padding-block-end: var(--space-1); }
.stats__table th, .stats__table td { padding: var(--space-1) var(--space-2); border-block-end: 1px solid var(--color-border); text-align: end; }
.stats__table th[scope="row"], .stats__table th:first-child { text-align: start; }
.stats__chart { display: block; inline-size: 100%; block-size: 8rem; fill: var(--color-gold); }
.stats__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }

@media (min-width: 37.5em) {
  .stats__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stats__table { font-size: 0.9375rem; }
.stats__table th, .stats__table td { overflow-wrap: normal; word-break: normal; }
.stats__table thead th { hyphens: auto; vertical-align: bottom; }
.stats__table th[scope="row"] { white-space: nowrap; }