/* Front Porch Bingo Card Generator. Form on the left, live preview of the PDF on the right; stacked on phones. */
.bg-tool { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; margin: 1rem 0 2rem; }
@media (max-width: 860px) { .bg-tool { grid-template-columns: 1fr; } }
.bg-form { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); min-width: 0; }
.bg-form fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.bg-form legend, .bg-l { font-weight: 700; display: block; margin-bottom: .35rem; }
.bg-pills { display: flex; flex-wrap: wrap; gap: .45rem; }
.bg-pills label { border: 2px solid var(--rule); border-radius: 999px; padding: .4rem .85rem; cursor: pointer; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; }
.bg-pills label:has(input:checked) { border-color: var(--amber); background: var(--paper-2); }
.bg-pills label:has(input:disabled) { opacity: .45; cursor: default; }
.bg-pills input { margin: 0 .4rem 0 0; }
.bg-pills label:focus-within { outline: 3px solid var(--amber); outline-offset: 2px; }
.bg-form input[type=text], .bg-form input[type=number], .bg-form textarea, .bg-form select { width: 100%; font: inherit; padding: .55rem .7rem;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--card); color: var(--ink); box-sizing: border-box; min-height: 44px; }
.bg-form textarea { min-height: 10rem; }
.bg-row { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-bottom: 1rem; }
.bg-checks { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-bottom: 1rem; }
.bg-checks label { display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; }
.bg-help { color: var(--muted); font-size: .92rem; margin: .3rem 0 0; }
.bg-msg { color: var(--ox); font-weight: 600; min-height: 1.2em; margin: .6rem 0 0; }
.bg-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.bg-badge { font-size: .75rem; background: var(--amber); color: var(--amber-ink); border-radius: 999px; padding: .05rem .45rem; margin-left: .3rem; font-weight: 700; }
.bg-is-pro .bg-badge { display: none; }
.bg-only-words, .bg-only-pictures { display: none; }
[data-bg-mode=words] .bg-only-words, [data-bg-mode=pictures] .bg-only-pictures { display: block; }
.bg-preview { position: sticky; top: 1rem; min-width: 0; }
.bg-paper { background: #fff; border: 1px solid var(--rule); border-radius: 6px; box-shadow: var(--shadow-sm); overflow: hidden; line-height: 0; }
.bg-paper canvas { display: block; max-width: 100%; }
.bg-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .5rem 0; flex-wrap: wrap; }
.bg-nav button { min-height: 40px; }
.bg-pages { color: var(--muted); font-size: .92rem; margin: .3rem 0; }
.bg-mypics { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .4rem; }
.bg-mypics li { display: flex; align-items: center; gap: .5rem; }
.bg-mypics canvas { width: 48px; height: 48px; border: 1px solid var(--rule); border-radius: 6px; background: #fff; flex: none; }
.bg-x { background: none; border: 0; color: var(--ox); text-decoration: underline; cursor: pointer; font: inherit; }
.bg-pro { background: var(--paper-2); border-radius: 14px; padding: 1rem 1.2rem; margin: 1rem 0; }
.bg-pro h2 { margin-top: 0; }
.bg-plans { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: .8rem 0 1rem; }
@media (max-width: 560px) { .bg-plans { grid-template-columns: 1fr; } }
.bg-plan { background: var(--card); border: 2px solid var(--rule); border-radius: 12px; padding: .9rem 1rem; text-align: center; }
.bg-plan-best { border-color: var(--amber); }
.bg-plan h3 { margin: 0; font-size: 1.05rem; }
.bg-price { font-size: 1.9rem; line-height: 1.1; font-weight: 800; margin: .2rem 0; }
.bg-price small { font-size: .95rem; font-weight: 600; color: var(--muted); }
.bg-plan p { margin: .2rem 0 .7rem; color: var(--muted); font-size: .92rem; }
.bg-license { display: flex; gap: .5rem; flex-wrap: wrap; }
.bg-license input { flex: 1 1 14rem; font: inherit; padding: .55rem .7rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--card); color: var(--ink); min-height: 44px; }
.bg-compare { width: 100%; border-collapse: collapse; margin: .6rem 0 1rem; font-size: .95rem; }
.bg-compare th, .bg-compare td { border-bottom: 1px solid var(--rule); padding: .45rem .5rem; text-align: left; vertical-align: top; }
.bg-compare th { background: var(--paper-2); }
.bg-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin: 1rem 0; }
.bg-shots figure { margin: 0; text-align: center; font-size: .9rem; color: var(--muted); }
.bg-shots img { width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 6px; background: #fff; }
.bg-gap { margin-top: .9rem; }