.infographic-card { --attribution-secondary: #bfd7d6; --card-footer-color: #adcacb; position: relative; width: 100%; height: 100%; color: #fff9ed; background: radial-gradient(ellipse at 20% 22%, #3c777360, transparent 65%), radial-gradient(ellipse at 100% 90%, #14343a70, transparent 60%), #204b54; }
.infographic-card__viewer { position: absolute; top: var(--format-top); bottom: calc(var(--content-bottom) + 210px); left: max(var(--edge), env(safe-area-inset-left)); right: max(var(--edge), env(safe-area-inset-right)); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.infographic-card__toolbar { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; flex: none; }
.infographic-card__label { margin: 0; font-size: 9px; font-weight: 650; letter-spacing: .12em; }
.infographic-card__download { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #ffffff12; color: inherit; }
.infographic-card__download svg { width: 22px; height: 22px; }
/* A whole-image preview with no inner scroll; swipes keep navigating the feed. */
.infographic-card__preview { flex: 1; min-height: 0; width: 100%; margin: 0; display: flex; align-items: center; justify-content: center; }
.infographic-card__image { display: block; max-width: 100%; width: auto; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 18px #102c3340); pointer-events: none; }
.infographic-card__fallback { max-width: 30ch; margin: 0; padding: 20px; color: #d3e4e3; font-size: 13px; line-height: 1.6; text-align: center; border: 1px dashed #c4ddd54d; border-radius: 16px; }
.infographic-card__open { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 26px; min-height: 44px; padding: 0 20px; border: 1px solid #fff2; border-radius: 24px; background: #d9ede1; color: #214b51; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.infographic-card__open::after { content: '↗'; font-size: 20px; font-weight: 400; }
.infographic-card__open:hover { background: #e7f4ec; }
.infographic-card__info { position: absolute; bottom: calc(var(--content-bottom) + 62px); left: max(var(--edge), env(safe-area-inset-left)); right: calc(max(var(--edge), env(safe-area-inset-right)) + var(--social-reserve)); }
.infographic-card__info .card-attribution__name, .infographic-card__info .card-attribution__description { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.infographic-card__info .card-attribution__name { -webkit-line-clamp: 2; max-width: 25ch; }
.infographic-card__info .card-attribution__description { -webkit-line-clamp: 3; max-width: 35ch; }
.infographic-card__footer { position: absolute; bottom: var(--content-bottom); left: max(var(--edge), env(safe-area-inset-left)); right: max(var(--edge), env(safe-area-inset-right)); }
.infographic-card__notice { position: absolute; top: var(--format-top); left: var(--edge); right: var(--edge); z-index: 2; }
.infographic-card button:focus-visible, .infographic-card a:focus-visible { outline: 2px solid #f4d4a4; outline-offset: 3px; }
.infographic-sheet { --sheet-surface: #f5f9f7; --sheet-ink: #204b54; --sheet-muted: #587875; --sheet-control: #e2eeea; --sheet-control-ink: #376b6d; --sheet-border: #d8e5df; --sheet-focus: #28676b; --sheet-handle: #c7dad3; --sheet-backdrop: #0a2a3599; height: 92dvh; max-height: calc(100dvh - env(safe-area-inset-top) - 8px); }
.infographic-sheet .sheet__header { padding-block: 12px; }
.infographic-sheet .sheet__header h2 { font-size: 20px; }
.infographic-reader { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
.infographic-reader__tools { display: flex; flex: none; align-items: center; gap: 4px; padding: 4px max(12px, env(safe-area-inset-left)); border-bottom: 1px solid var(--sheet-border); }
.infographic-reader__tools button { min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 12px; background: transparent; color: #32686b; font: inherit; font-size: 12px; }
.infographic-reader__tools .infographic-reader__less, .infographic-reader__tools .infographic-reader__more { font-size: 24px; }
.infographic-reader__tools button:disabled { opacity: .35; cursor: default; }
.infographic-reader__tools button:not(:disabled):hover, .infographic-reader__tools button[aria-pressed="true"] { background: #dfece5; }
.infographic-reader__tools .infographic-reader__text-toggle { margin-left: auto; }
.infographic-reader__tools .infographic-reader__fit { background: #dfece5; font-weight: 650; }
.infographic-reader__zoom { min-width: 36px; font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; }
.infographic-reader__viewport { flex: 1; min-height: 0; overflow: auto; touch-action: pan-x pan-y pinch-zoom; overscroll-behavior: contain; scrollbar-width: thin; background: #e7efeb; padding: 12px; user-select: text; -webkit-user-select: text; }
.infographic-reader__viewport:focus-visible { outline: 2px solid var(--sheet-focus); outline-offset: -3px; }
.infographic-reader__canvas { margin-inline: auto; }
.infographic-reader__image { display: block; width: 100%; height: auto; border-radius: 12px; background: #fff9ed; }
.infographic-reader__text { max-width: 66ch; margin: 0 auto; padding: 20px; border-radius: 12px; background: #fffdf7; color: #23494f; font-size: 16px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.infographic-reader__error { max-width: 36ch; margin: 25px auto 12px; font-size: 14px; line-height: 1.5; text-align: center; }
.infographic-reader__retry { display: block; margin: 0 auto; min-height: 44px; padding: 0 18px; border-radius: 24px; background: #28676b; color: #fff; font-size: 13px !important; }
@media (max-width: 699px) and (max-height: 650px) {
  .infographic-card__viewer { bottom: calc(var(--content-bottom) + 172px); gap: 8px; }
  .infographic-card__info { bottom: calc(var(--content-bottom) + 34px); }
  .infographic-card__info .card-attribution__description { margin-top: 8px; font-size: 12px; }
}
@media (min-width: 700px) {
  .infographic-card__viewer { left: 36%; right: calc(var(--edge) + var(--social-reserve)); bottom: calc(var(--content-bottom) + 34px); }
  .infographic-card__info { width: 28%; right: auto; }
  .infographic-sheet { inset: 16px; margin: auto; width: min(920px, calc(100vw - 32px)); height: calc(100dvh - 32px); max-height: none; }
  .infographic-reader__tools { padding-inline: 20px; }
}
@media (min-width: 560px) and (max-height: 480px) {
  .infographic-card__viewer { left: 37%; right: calc(var(--edge) + var(--social-reserve)); bottom: calc(var(--content-bottom) + 24px); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 44px minmax(0, 1fr); gap: 10px; }
  .infographic-card__toolbar { grid-column: 1 / -1; }
  .infographic-card__preview { height: 100%; }
  .infographic-card__open { font-size: 11px; gap: 8px; padding-inline: 12px; }
  .infographic-card__info { top: calc(var(--format-top) + 34px); bottom: auto; right: auto; width: 32%; }
  .infographic-card__info .card-attribution__name { font-size: 22px; }
  .infographic-card__info .card-attribution__description { font-size: 11px; }
  .infographic-sheet { height: calc(100dvh - 8px); }
  .infographic-sheet .sheet__handle, .infographic-sheet .sheet__heading p { display: none; }
  .infographic-sheet .sheet__header { padding-block: 4px; }
}