/* Pigpen cipher tool */
.pp-h { margin: 18px 0 4px; font-size: 18px; }
.pp-h:first-child { margin-top: 0; }
.tool-in label.pp-inl { display: inline; margin: 0; font-weight: 600; }
.pp-opts { gap: 12px 22px; }
.pp-fld { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#pp-per { width: 70px; font: 700 16px var(--font-sans); padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--bg-canvas); color: var(--ink); text-align: center; }
.pp-opts input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
.pp-strip { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 4px; padding: 12px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-md); min-height: 64px; color: var(--ink); max-width: 100%; }
.pp-cell { display: inline-flex; flex-direction: column; align-items: center; }
.pp-cell small { font: 600 11px var(--font-mono); color: var(--muted); line-height: 1.2; }
.pp-cell.pp-x { justify-content: center; font-family: var(--font-mono); }
.pp-sp { display: inline-block; height: 1px; }
.pp-br { flex-basis: 100%; height: 0; }
.pp-g { display: block; max-width: 100%; height: auto; }
.pp-pad { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 10px 0; }
.pp-grp { display: grid; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-card); }
.pp-grp-9 { grid-template-columns: repeat(3, auto); }
.pp-grp-4 { grid-template-columns: repeat(2, auto); }
.pp-key { display: flex; flex-direction: column; align-items: center; gap: 0; width: 52px; padding: 4px 2px 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-canvas); color: var(--ink); cursor: pointer; font: inherit; }
.pp-key small { font: 600 11px var(--font-mono); color: var(--muted); }
.pp-key:hover, .pp-key:focus-visible { border-color: var(--accent); background: var(--accent-tint); outline: none; }
.pp-key:active { background: var(--accent); color: #fff; }
.pp-key:active small { color: #fff; }
#pp-dec { font: 600 18px var(--font-mono); letter-spacing: .04em; }
.pp-sheet { color: #0f172a; }
.pp-sheet .pp-strip { background: #fff; border-color: #cbd5e1; color: #0f172a; }
.pp-sheet .pp-cell small, .pp-chart small { color: #475569; }
.pp-sh { margin: 12px 0 6px; font-weight: 600; color: #0f172a; }
.pp-chart { display: flex; flex-wrap: wrap; gap: 12px 18px; justify-content: center; }
.pp-cg { display: grid; gap: 6px 4px; padding: 8px; border: 1px solid #cbd5e1; border-radius: 8px; }
.pp-cg.pp-grp-9 { grid-template-columns: repeat(3, auto); }
.pp-cg.pp-grp-4 { grid-template-columns: repeat(4, auto); }
.pp-ck { display: inline-flex; flex-direction: column; align-items: center; }
.pp-ck small { font: 700 12px var(--font-mono); }
@media (max-width: 480px) {
  .pp-sheet { padding: 20px 10px; }
  .pp-key { width: 48px; }
  .pp-cg.pp-grp-4 { grid-template-columns: repeat(2, auto); }
}
@media print {
  .pp-strip { border: none !important; padding: 0 !important; color: #000 !important; }
  .pp-cg { border-color: #000 !important; }
  .pp-sh, .pp-ck small, .pp-cell small { color: #000 !important; }
  .pp-pmsg { margin-top: 6pt; }
}