/* ==========================================================================
   Label renderer styles (shared by homepage demo and the generator preview).
   Deliberately distinct from the app UI: black on white, Helvetica/Arial, hairline/medium/thick rules.
   Sizes are in pt-based em units so on-screen previews scale with --sf-scale.
   ========================================================================== */

.sf-panel {
	--sf-scale: 1;
	--sf-ink: #000;
	--sf-hair: 0.5px;
	--sf-medium: 4px;
	--sf-thick: 8px;
	font-family: Helvetica, Arial, "Liberation Sans", "Noto Sans", sans-serif;
	font-size: calc(9pt * var(--sf-scale) * 1.333);
	line-height: 1.2;
	color: var(--sf-ink);
	background: #fff;
	border: 1px solid var(--sf-ink);
	padding: 0.3em 0.45em 0.4em;
	inline-size: min(100%, 340px);
	max-inline-size: 100%;
	overflow-wrap: anywhere;
	text-align: start;
	font-variant-numeric: tabular-nums;
}
.sf-panel[dir="rtl"] { font-family: "Noto Naskh Arabic", "Geeza Pro", Tahoma, Arial, sans-serif; }
.sf-panel__title {
	margin: 0;
	font-size: 2.15em;
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.05;
	padding-block-end: 0.1em;
	border-block-end: var(--sf-hair) solid var(--sf-ink);
}
.sf-panel__serving { margin: 0; padding-block: 0.25em; border-block-end: var(--sf-thick) solid var(--sf-ink); }
.sf-panel__table { inline-size: 100%; border-collapse: collapse; }
.sf-panel__table th, .sf-panel__table td { padding-block: 0.2em; border-block-end: var(--sf-hair) solid var(--sf-ink); vertical-align: top; font-weight: 400; text-align: start; }
.sf-panel__table thead th { font-weight: 700; font-size: 0.85em; }
.sf-panel__table tbody th { font-weight: 400; padding-inline-end: 0.5em; }
.sf-panel__table .sf-amt { text-align: end; white-space: nowrap; padding-inline-end: 0.6em; }
.sf-panel__table .sf-dv { text-align: end; white-space: nowrap; font-weight: 700; }
.sf-panel__table thead .sf-dv, .sf-panel__table thead .sf-amt { font-weight: 700; white-space: normal; }
.sf-rule-medium > * { border-block-end: var(--sf-medium) solid var(--sf-ink) !important; }
.sf-rule-thick-top > * { border-block-start: var(--sf-thick) solid var(--sf-ink); }
.sf-panel__table tbody tr:last-child > * { border-block-end: var(--sf-thick) solid var(--sf-ink); }
.sf-src { font-size: 0.92em; }
.sf-child th { padding-inline-start: 1em; }
.sf-panel__foot { margin: 0.3em 0 0; font-size: 0.85em; }
.sf-panel .sf-overridden { outline: 2px dashed #b45309; outline-offset: 1px; }
.sf-panel .sf-unverified::after { content: "?"; font-size: 0.7em; vertical-align: super; color: #b45309; }
.sf-other { font-family: Helvetica, Arial, sans-serif; font-size: 0.82rem; color: #000; max-inline-size: 340px; margin: 0.6em 0 0; }

/* Demo wrapper (homepage) */
.demo-panel { position: relative; margin: 0; padding: clamp(0.75rem, 3vw, 1.25rem); inline-size: 100%; max-inline-size: 400px; min-inline-size: 0; background: #fff; border: 1px solid var(--c-line, #dde3e8); border-radius: 12px; box-shadow: 0 8px 28px rgb(15 26 36 / 10%); }
.demo-panel__ribbon { position: absolute; inset-block-start: 0.75rem; inset-inline-end: 0; background: #b45309; color: #fff; font: 700 0.7rem/1 system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.35rem 0.6rem; border-radius: 4px 0 0 4px; }
.demo-panel__caption { margin-block-start: 0.75rem; font-size: 0.78rem; color: var(--c-muted, #5b6874); max-inline-size: 340px; }

@media (max-width: 400px) { .sf-panel { font-size: calc(8pt * var(--sf-scale) * 1.333); } }