/* 2027bingocard.com: one stylesheet for the card maker on the home page and the pages build.py writes. */
:root { --bg:#f4f1ea; --ink:#1d2433; --muted:#5d6475; --line:#d9d3c5; --panel:#fff;
  --c1:#1f3a5f; --c2:#e9eef6; --c3:#f2b33d; --ctext:#1d2433; }
body[data-theme="rose"]  { --c1:#b3475f; --c2:#fbecef; --c3:#f0a35e; }
body[data-theme="sage"]  { --c1:#40664f; --c2:#eaf2ec; --c3:#d9a441; }
body[data-theme="plum"]  { --c1:#5a3e7a; --c2:#f0eaf7; --c3:#e58fb1; }
body[data-theme="ink"]   { --c1:#222222; --c2:#f3f3f3; --c3:#ff6b4a; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.55 "Avenir Next","Segoe UI",system-ui,sans-serif; }
main { max-width:900px; margin:0 auto; padding:0 16px 48px; }
header.top { max-width:900px; margin:0 auto; padding:14px 16px; font-weight:800; font-size:19px;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 22px; }
header.top .brand { color:var(--ink); text-decoration:none; }
header.top nav { display:flex; flex-wrap:wrap; gap:2px 16px; font-size:15px; font-weight:650; }
header.top nav a { text-decoration:none; padding:4px 0; }
header.top nav a:hover, header.top nav a[aria-current="page"] { text-decoration:underline; text-underline-offset:4px; }
@media (max-width:420px) { header.top nav { gap:2px 13px; font-size:14px; } }
h1 { font-size:clamp(28px,5vw,40px); line-height:1.15; margin:10px 0 8px; text-wrap:balance; }
h2 { font-size:24px; margin:0 0 10px; }
h3 { font-size:18px; margin:18px 0 6px; }
section { margin:38px 0; }
.lede { font-size:19px; color:var(--muted); margin:0; max-width:44em; }
.fine { font-size:14px; color:var(--muted); }
a { color:var(--c1); }

.tools { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 12px; align-items:center; }
button, select, a.btn { font:inherit; font-weight:650; border-radius:10px; padding:10px 14px; border:2px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; }
a.btn { display:inline-block; text-decoration:none; }
button.primary, a.btn.primary { background:var(--c1); border-color:var(--c1); color:#fff; }
button[aria-pressed="true"] { background:var(--c3); border-color:var(--c3); }
button:hover, a.btn:hover { filter:brightness(1.05); }
.swatches { display:flex; gap:6px; margin-left:auto; }
.swatch { width:30px; height:30px; padding:0; border-radius:50%; border:3px solid var(--panel); box-shadow:0 0 0 2px var(--line); }
.swatch[aria-pressed="true"] { box-shadow:0 0 0 3px var(--ink); background-clip:padding-box; }

.card { background:var(--panel); border:3px solid var(--c1); border-radius:18px; padding:clamp(12px,3vw,26px); max-width:680px; margin:0 auto; }
.card-title { width:100%; border:0; background:transparent; text-align:center; font-family:inherit; font-weight:800; font-size:clamp(24px,5vw,38px); line-height:1.1; color:var(--c1); padding:4px 0 12px; }
.card-title:focus { outline:2px dashed var(--line); border-radius:8px; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(4px,1vw,8px); }
.cell { position:relative; aspect-ratio:1/1; background:var(--c2); border-radius:10px; display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:text; min-width:0; }
.cell .t { width:100%; max-height:100%; padding:clamp(3px,.9vw,8px); text-align:center; color:var(--ctext); font-weight:600;
  font-size:clamp(10px,2.2vw,15px); line-height:1.15; overflow-wrap:break-word; hyphens:auto; outline:0; min-height:1.2em; }
.cell:focus-within { outline:3px solid var(--c3); }
.cell .t:empty::before { content:attr(data-ph); color:#9aa1b0; font-weight:500; }
.cell.free { background:var(--c1); cursor:default; }
.cell.free .t { color:#fff; font-weight:800; }
.cell.done { background:var(--c3); }
.cell.done::after { content:"✓"; position:absolute; right:5px; top:1px; font-weight:900; font-size:clamp(12px,2.6vw,20px); color:var(--c1); }
body.marking .cell { cursor:pointer; }
body.marking .cell .t { pointer-events:none; }
.card-foot { text-align:center; font-size:12px; color:var(--muted); margin-top:10px; }
.hint { text-align:center; margin:12px 0 0; }
.toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 16px; border-radius:10px; font-size:15px; }

.ideas { columns:2 260px; column-gap:28px; padding-left:20px; margin:6px 0 0; }
.ideas li { break-inside:avoid; margin:3px 0; }
details { background:var(--panel); border:2px solid var(--line); border-radius:12px; padding:12px 16px; margin:8px 0; }
summary { font-weight:700; cursor:pointer; }
.steps { padding-left:22px; }
footer { max-width:900px; margin:0 auto; padding:22px 16px 40px; border-top:2px solid var(--line); }

/* ---- the pages besides the maker */
.crumb { font-size:14px; color:var(--muted); margin:6px 0 0; }
.crumb a { color:var(--muted); }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; padding:0; list-style:none; }
.chip { display:inline-block; background:var(--panel); border:2px solid var(--line); border-radius:999px; padding:5px 13px; font-size:15px; font-weight:650; text-decoration:none; }
.chip:hover { border-color:var(--c1); }
.cta { background:var(--panel); border:2px solid var(--line); border-radius:14px; padding:14px 16px; margin:22px 0 0; }
.cta p { margin:0 0 10px; }
.cta .tools { margin:0; }
.more { padding-left:20px; margin:0; }
.more li { margin:7px 0; }
.plain { padding-left:22px; }
.plain li { margin:5px 0; }
.sheets { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; margin:24px 0 0; }
.sheet { margin:0; background:var(--panel); border:2px solid var(--line); border-radius:14px; padding:12px; display:flex; flex-direction:column; }
.sheet img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:6px; background:#fff; }
.sheet figcaption { margin:10px 2px 0; flex:1; }
.sheet figcaption b { display:block; }
.sheet figcaption span { font-size:15px; color:var(--muted); }
.sheet .tools { margin:10px 0 0; gap:6px; }
.sheet .tools > * { padding:8px 9px; font-size:14px; }
.sample { max-width:420px; margin:18px auto 0; }
.sample .cell { cursor:default; }

@media print {
  @page { margin:12mm; }
  body { background:#fff; }
  main { padding:0; max-width:none; }
  /* home: only the card */
  body.home > *:not(main), body.home main > *:not(#maker), #maker > *:not(.card) { display:none !important; }
  .card { max-width:none; border-width:2px; }
  .cell, .cell.free, .cell.done { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .cell .t { font-size:11pt !important; }
  .card-title { font-size:28pt; }
  /* templates: only the chosen sheet, on one page */
  body.tpl > *:not(main), body.tpl main > *:not(.sheets), .sheet:not(.printing), .sheet figcaption, .sheet .tools { display:none !important; }
  .sheets { display:block; margin:0; }
  .sheet { border:0; padding:0; background:none; }
  .sheet img { margin:0 auto; width:auto; max-width:100%; max-height:245mm; border:0; border-radius:0; }
  /* everything else: the words, without the navigation */
  header.top nav, footer, .cta, .crumb, .chips { display:none !important; }
}