/* The Mini App's style (local/mini-app.ts): the colours of the reader's Telegram theme, which its script sets as
   --tg-theme-* variables, with plain ones outside it, and a phone's width first. */
:root {
  --bg: var(--tg-theme-bg-color, #fff);
  --text: var(--tg-theme-text-color, #000);
  --hint: var(--tg-theme-hint-color, #707579);
  --accent: var(--tg-theme-accent-text-color, var(--tg-theme-link-color, #3390ec));
  --button: var(--tg-theme-button-color, #3390ec);
  --button-text: var(--tg-theme-button-text-color, #fff);
  --section: var(--tg-theme-section-bg-color, var(--tg-theme-secondary-bg-color, #f1f1f4));
  --separator: var(--tg-theme-section-separator-color, rgba(128, 128, 128, 0.25));
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%;
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 12px 12px calc(24px + env(safe-area-inset-bottom)); }
h1 { font-size: 20px; margin: 4px 4px 12px; overflow-wrap: anywhere; }
h2 { font-size: 14px; font-weight: 600; color: var(--accent); margin: 18px 4px 6px; }
.list { list-style: none; margin: 0; padding: 0; background: var(--section); border-radius: 12px; overflow: hidden; }
.list li + li { border-top: 1px solid var(--separator); }
.item { display: block; width: 100%; padding: 12px 14px; border: 0; background: none; color: inherit; font: inherit;
  text-align: start; cursor: pointer; }
.item:active { background: var(--separator); }
.name { display: block; font-weight: 500; overflow-wrap: anywhere; }
.note { display: -webkit-box; margin-top: 2px; overflow: hidden; color: var(--hint); font-size: 14px;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hint { margin: 6px 4px; color: var(--hint); font-size: 14px; }
.notice { margin: 24px 4px 16px; }
.text { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--section); white-space: pre-wrap;
  overflow-wrap: anywhere; font: 14px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; cursor: copy;
  -webkit-user-select: text; user-select: text; }
.text.copied { outline: 2px solid var(--button); }
.picture { display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; overflow: hidden;
  background: var(--section); cursor: zoom-in; }
.picture img { display: block; width: 100%; height: auto; }
.refresh { margin: 0 4px; padding: 10px 16px; border: 0; border-radius: 10px; background: var(--button);
  color: var(--button-text); font: inherit; }
#zoom { position: fixed; inset: 0; z-index: 1; display: flex; overflow: auto; background: #000; cursor: zoom-out; }
#zoom[hidden] { display: none; }
#zoom img { flex: none; min-width: 100%; max-width: none; margin: auto; }