/* Front Porch Puzzle Maker (/maker/). Screen: form + preview. Print: only the puzzle pages, one per sheet. */
.mk-tool { display: grid; gap: 1.2rem; }
.mk-form { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 1.2rem; box-shadow: var(--shadow-sm); }
.mk-form fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.mk-form legend, .mk-form label.mk-l { font-weight: 700; display: block; margin-bottom: .35rem; }
.mk-types { display: flex; flex-wrap: wrap; gap: .5rem; }
.mk-types label { border: 2px solid var(--rule); border-radius: 999px; padding: .45rem .9rem; cursor: pointer; font-weight: 600; }
.mk-types input { margin-right: .35rem; }
.mk-form input[type=text], .mk-form textarea, .mk-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; }
.mk-form textarea { min-height: 11rem; font-family: inherit; }
.mk-row { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin-bottom: 1rem; }
.mk-checks { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: 1rem; }
.mk-help { color: var(--muted); font-size: .92rem; margin: .3rem 0 0; }
.mk-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.mk-msg { color: var(--ox); font-weight: 600; min-height: 1.2em; }
.mk-pro { background: var(--paper-2); border-radius: 14px; padding: 1rem 1.2rem; }
.mk-pro h2 { margin-top: 0; }
.mk-pro-only:disabled { opacity: .5; }
.mk-is-pro .mk-pro-badge { display: none; }
.mk-pro-badge { font-size: .75rem; background: var(--amber); color: var(--amber-ink); border-radius: 999px; padding: .05rem .45rem; margin-left: .3rem; }
.mk-plans { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: .8rem 0 1rem; }
.mk-plan { background: var(--card); border: 2px solid var(--rule); border-radius: 12px; padding: .9rem 1rem; text-align: center; }
.mk-plan-best { border-color: var(--amber); }
.mk-plan h3 { margin: 0; font-size: 1.05rem; }
.mk-plan .mk-price { font-size: 1.9rem; line-height: 1.1; color: var(--ink); font-weight: 800; margin: .2rem 0; }
.mk-plan .mk-price small { font-size: .95rem; font-weight: 600; color: var(--muted); }
.mk-plan p { margin: .2rem 0 .7rem; color: var(--muted); font-size: .92rem; }
.mk-license { display: flex; gap: .5rem; flex-wrap: wrap; }
.mk-license input { flex: 1 1 14rem; }

/* puzzle pages (preview looks like the printed sheet) */
.mk-out { display: grid; gap: 1.5rem; }
.mk-page { background: #fff; color: #111; border: 1px solid var(--rule); box-shadow: var(--shadow); padding: 1.6rem;
  max-width: 8.5in; width: 100%; margin: 0 auto; box-sizing: border-box; font-size: 16px; }
.mk-title { text-align: center; margin: 0 0 .2rem; font-size: 2rem; }
.mk-sub { text-align: center; margin: 0 0 .6rem; color: #444; }
.mk-name { margin: .2rem 0 .8rem; font-size: .95rem; }
.mk-foot { text-align: center; font-size: .75rem; color: #666; margin: 1rem 0 0; }
.mk-ws { container-type: inline-size; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); border: 2px solid #111; max-width: 6.2in; margin: 0 auto; }
.mk-ws span { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-weight: 700;
  font-size: min(1.4rem, calc(58cqi / var(--n))); font-family: "Atkinson Hyperlegible", Arial, sans-serif; }
.mk-ws .mk-hit { background: #f6d58f; border-radius: 4px; }
.mk-words { columns: 3 9rem; list-style: none; padding: 0; margin: 1rem auto 0; max-width: 6.2in; font-weight: 600; }
.mk-words li { padding: .15rem 0; }
.mk-cw { container-type: inline-size; display: grid; grid-template-columns: repeat(var(--w), minmax(0, 1fr)); max-width: min(6.5in, calc(var(--w) * .45in)); margin: 0 auto; }
.mk-cw span { aspect-ratio: 1; position: relative; }
.mk-cw .mk-cell { border: 1.5px solid #111; margin: -0.75px; background: #fff; }
.mk-cw .mk-cell b { position: absolute; top: 1px; left: 2px; font-size: min(.62rem, calc(30cqi / var(--w))); font-weight: 700; }
.mk-cw .mk-cell i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-style: normal; font-weight: 700; color: #7b3524; }
.mk-clues { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.mk-clues h3 { margin: 0 0 .3rem; }
.mk-clues ol { list-style: none; padding: 0; margin: 0; }
.mk-clues li { margin: .2rem 0; }
.mk-scr { padding-left: 1.6rem; max-width: 6in; margin: 0 auto; }
.mk-scr li { display: flex; gap: 1rem; align-items: baseline; padding: .55rem 0; }
.mk-scr-s { font-weight: 700; letter-spacing: .05em; min-width: 12rem; font-size: 1.15rem; }
.mk-scr-a { flex: 1; border-bottom: 1.5px solid #333; min-height: 1.3em; font-weight: 700; color: #7b3524; }
.mk-sd { container-type: inline-size; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); max-width: 5.6in; margin: 0 auto; border: 3px solid #111; }
.mk-sd span { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 1px solid #999;
  font-size: min(1.6rem, 6cqi); font-family: "Atkinson Hyperlegible", Arial, sans-serif; }
.mk-sd span:nth-child(9n+3), .mk-sd span:nth-child(9n+6) { border-right: 3px solid #111; }
.mk-sd span:nth-child(n+19):nth-child(-n+27), .mk-sd span:nth-child(n+46):nth-child(-n+54) { border-bottom: 3px solid #111; }
.mk-sd .mk-given { font-weight: 700; }
.mk-sd .mk-fill { color: #7b3524; }
.mk-cg { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin: 1rem 0 1.4rem; }
.mk-cg-w { display: inline-flex; gap: .2rem; }
.mk-cg-l { display: inline-flex; flex-direction: column; align-items: center; min-width: 1.4rem; }
.mk-cg-a { border-bottom: 1.5px solid #333; min-height: 1.5em; width: 100%; text-align: center; font-weight: 700; color: #7b3524; }
.mk-cg-c { font-size: .85rem; font-weight: 700; }
.mk-cg-by { flex-basis: 100%; text-align: right; margin: .2rem 0 0; font-style: italic; }
/* large print (Pro) */
.mk-lp { font-size: 20px; }
.mk-lp .mk-ws span { font-size: min(1.9rem, calc(68cqi / var(--n))); }
.mk-lp .mk-words { columns: 2 12rem; font-size: 1.25rem; }
.mk-lp .mk-scr-s { font-size: 1.5rem; }
.mk-lp .mk-sd span { font-size: min(2.1rem, 7.5cqi); }
.mk-lp .mk-cg-l { min-width: 1.9rem; }
.mk-lp .mk-cg-c { font-size: 1.1rem; }

@media (max-width: 640px) {
  .mk-clues { grid-template-columns: 1fr; }
  .mk-page { padding: .9rem .7rem; }
  .mk-title { font-size: 1.5rem; }
  .mk-types { display: grid; grid-template-columns: 1fr 1fr; }
  .mk-types label { text-align: center; padding: .6rem .5rem; }
  .mk-actions .btn { width: 100%; text-align: center; }
  .mk-scr-s { min-width: 0; flex: 1 1 50%; font-size: 1rem; }
  .mk-words { columns: 2; }
  .mk-plans { grid-template-columns: 1fr; }
}

/* Printing: maker.js copies the finished pages into #mk-print-root (a direct child of body) before the print dialog
   opens, and only that prints. Hiding the page with visibility and floating .mk-out over it printed blank pages. */
#mk-print-root { display: none; }
/* off-screen measuring pass (maker.js preparePrint): same box as the printed page, 7.5in wide */
#mk-print-root.mk-measure { display: block; position: absolute; left: -10000px; top: 0; width: 7.5in; }
#mk-print-root.mk-measure .mk-page { border: 0; box-shadow: none; max-width: none; margin: 0; padding: .2in .3in; }
#mk-print-root.mk-measure .mk-title { font-size: 2rem; }   /* phones shrink it on screen; paper does not */
@media print {
  body > *:not(#mk-print-root) { display: none !important; }
  body { background: #fff !important; margin: 0; padding: 0; }
  #mk-print-root { display: block !important; }
  .mk-page { border: 0; box-shadow: none; max-width: none; margin: 0; padding: .2in .3in; page-break-after: always; break-after: page; }
  .mk-page:last-child { page-break-after: auto; break-after: auto; }
  .mk-ws .mk-hit { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { size: letter; margin: .5in; }
}

.mk-buy[hidden], .mk-license[hidden] { display: none !important; }
.mk-plan[hidden] { display: none !important; }
.mk-plans:has(.mk-plan[hidden]) { grid-template-columns: minmax(0, 26rem); justify-content: center; }
/* fill-in */
.mk-fi .mk-cell.mk-given { background: #eef0ea; }
.mk-fi .mk-cell i { color: #111; font-size: min(1.3rem, calc(45cqi / var(--w))); }
.mk-fi-words { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .4rem 1.2rem; margin-top: 1rem; }
.mk-fi-words h3 { margin: 0 0 .2rem; font-size: 1rem; }
.mk-fi-words ul { list-style: none; padding: 0; margin: 0; font-weight: 600; letter-spacing: .04em; }
.mk-fi-words li { padding: .08rem 0; }
.mk-fi-words .mk-fi-done { text-decoration: line-through; color: #777; }
.mk-lp .mk-fi-words { font-size: 1.25rem; }
.mk-lp .mk-fi-words h3 { font-size: 1.15rem; }
@media print { .mk-fi .mk-cell.mk-given { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
#mk-print[hidden] { display: none !important; }

/* Pro saved lists */
.mk-saved { margin-bottom: 1rem; }
.mk-saved-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.mk-saved-row select { flex: 1 1 14rem; }
#mk-unsave[hidden] { display: none !important; }