/* Verse picture card: "Create picture" button and its dialog. */

/* Garet (free weights) by Spacetype — card typeface. Free-font EULA allows web
   embedding and web-font conversion; see assets/fonts/garet-spacetype-eula.pdf. */
@font-face { font-family: "Garet"; src: url("../fonts/garet-book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Garet"; src: url("../fonts/garet-heavy.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

.tg-vcard { margin-top: 14px; }

.tg-vcard__open {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--tg-accent);
	border-radius: 999px;
	background: var(--tg-white);
	color: var(--tg-accent);
	font: 600 15px var(--tg-body);
	cursor: pointer;
}
.tg-vcard__open svg { width: 18px; height: 18px; }
.tg-vcard__open:hover { background: var(--tg-accent); color: var(--tg-white); }

.tg-vcard__dialog {
	width: min(460px, calc(100vw - 24px));
	max-height: calc(100dvh - 24px);
	padding: 18px;
	border: 0;
	border-radius: var(--tg-radius-lg);
	background: var(--tg-white);
	color: var(--tg-ink);
	box-shadow: 0 24px 60px rgba(21, 37, 61, 0.28);
	overflow-y: auto;
}
.tg-vcard__dialog::backdrop { background: rgba(21, 37, 61, 0.55); }
.tg-vcard__dialog[open] { display: flex; flex-direction: column; gap: 14px; }

.tg-vcard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tg-vcard__title { margin: 0; font: 400 22px/1.2 var(--tg-display); color: var(--tg-ink); }
.tg-vcard__close {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border: 1px solid var(--tg-line);
	border-radius: 50%;
	background: var(--tg-white);
	color: var(--tg-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.tg-vcard__close svg { width: 20px; height: 20px; }

.tg-vcard__sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tg-vcard__sizes button {
	min-height: 54px;
	border: 1px solid var(--tg-line);
	border-radius: var(--tg-radius);
	background: var(--tg-white);
	color: var(--tg-ink);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	font-family: var(--tg-body);
	cursor: pointer;
}
.tg-vcard__sizes strong { font-size: 15px; font-weight: 600; }
.tg-vcard__sizes span { font-size: 13px; color: var(--tg-muted); }
.tg-vcard__sizes button[aria-pressed="true"] { border-color: var(--tg-accent); background: var(--tg-sky); }

.tg-vcard__preview {
	border-radius: var(--tg-radius);
	overflow: hidden;
	background: var(--tg-sky);
	display: flex;
	justify-content: center;
}
.tg-vcard__preview canvas { display: block; width: 100%; height: auto; max-height: 56dvh; object-fit: contain; }
.tg-vcard:not(.is-ready) .tg-vcard__preview canvas { opacity: 0.25; }

.tg-vcard__actions { display: flex; gap: 10px; }
.tg-vcard__btn {
	flex: 1;
	min-height: 52px;
	border: 1px solid var(--tg-line);
	border-radius: var(--tg-radius);
	background: var(--tg-white);
	color: var(--tg-ink);
	font: 600 16px var(--tg-body);
	cursor: pointer;
}
.tg-vcard__btn--primary { border-color: var(--tg-accent); background: var(--tg-accent); color: var(--tg-white); }
.tg-vcard__btn:disabled { opacity: 0.5; cursor: wait; }
.tg-vcard__status { margin: 0; min-height: 1.3em; font-size: 14px; color: var(--tg-ok); }

.tg-vcard__open:focus-visible,
.tg-vcard__close:focus-visible,
.tg-vcard__sizes button:focus-visible,
.tg-vcard__btn:focus-visible { outline: 3px solid var(--tg-accent); outline-offset: 2px; }