/* Browser tools, batch 2 (tuner, metronome, piano, drums, PDF, panchang, social, calculators, learning).
   Loaded only on those pages, after webtools.css. Uses the site tokens. */
.wt-big { font-size: clamp(2.4rem, 9vw, 3.6rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; margin: 0; }
.wt-center { text-align: center; }
.wt-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wt-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.wt-table th, .wt-table td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.wt-table thead th { position: sticky; top: 0; background: var(--surface, var(--bg)); }
.wt-table tr.is-mine td { background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 600; }
.wt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem; }
.cc-stat { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.cc-stat span { font-size: 0.8rem; color: var(--text-2); }
.cc-stat strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.cc-stat.is-over strong { color: var(--bad); }
.tool textarea.wt-prose { font: 1rem/1.5 inherit; font-family: inherit; min-height: 9rem; resize: vertical; }
.wt-result { padding: 0.85rem 1rem; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--border); line-height: 1.6; }
.wt-canvas { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.wt-preview { display: flex; justify-content: center; }
.wt-preview .wt-canvas { max-height: 70vh; width: auto; }
/* guitar tuner */
.tn-display { display: grid; gap: 0.35rem; justify-items: center; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.tn-note { font-size: clamp(3rem, 14vw, 4.5rem); font-weight: 700; line-height: 1; }
.tn-scale { position: relative; width: 100%; max-width: 420px; height: 34px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--bad), var(--star) 35%, var(--ok) 47%, var(--ok) 53%, var(--star) 65%, var(--bad)); opacity: 0.85; }
.tn-needle { position: absolute; top: -4px; bottom: -4px; left: 50%; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--text); transition: left 90ms linear; }
.tn-meta { display: flex; gap: 1rem; font-variant-numeric: tabular-nums; color: var(--text-2); }
[data-webtool="tuner"][data-state="ok"] .tn-note { color: var(--ok); }
[data-webtool="tuner"][data-state="off"] .tn-note { color: var(--bad); }
.tn-strings { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tn-strings .btn { min-width: 3.2rem; }
.tn-strings .is-current { outline: 2px solid var(--ok); }
/* metronome */
.mt-dots { display: flex; gap: 0.5rem; justify-content: center; min-height: 28px; }
.mt-dots span { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); background: var(--bg); }
.mt-dots span.is-accent { border-color: var(--accent); }
.mt-dots span.is-on { background: var(--accent); border-color: var(--accent); }
/* piano */
.pk-wrap { overflow-x: auto; padding-bottom: 0.25rem; }
[data-keys] { position: relative; display: flex; height: 190px; min-width: 560px; user-select: none; -webkit-user-select: none; touch-action: none; }
.pk { position: relative; border: 1px solid var(--border); border-radius: 0 0 6px 6px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 6px; font-size: 0.7rem; cursor: pointer; }
.pk-w { flex: 1 1 0; background: #fff; color: #333; z-index: 1; }
.pk-b { position: absolute; width: 4%; height: 60%; background: #1f2937; color: #e5e7eb; z-index: 2; transform: translateX(-50%); }
.pk.is-down.pk-w { background: color-mix(in srgb, var(--accent) 30%, #fff); }
.pk.is-down.pk-b { background: var(--accent); }
.pk-k { opacity: 0.6; }
.no-labels .pk-n, .no-labels .pk-k { visibility: hidden; }
/* drum machine */
.dm-grid { display: grid; gap: 4px; overflow-x: auto; }
.dm-row { display: grid; grid-template-columns: 4.5rem repeat(16, minmax(22px, 1fr)); gap: 3px; align-items: center; min-width: 470px; }
.dm-lab { font-size: 0.8rem; font-weight: 600; }
.dm-step { height: 30px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); cursor: pointer; padding: 0; }
.dm-step.dm-q { background: color-mix(in srgb, var(--text) 6%, var(--bg)); }
.dm-step[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.dm-step.is-now { box-shadow: 0 0 0 2px var(--star) inset; }
.dm-pads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.dm-pad { min-height: 64px; font-weight: 600; touch-action: manipulation; }
.dm-pad.is-down { background: var(--accent); color: #fff; }
/* jpg to pdf */
.pdf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.pdf-item { display: flex; gap: 0.5rem; align-items: center; padding: 0.35rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pdf-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.pdf-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.pdf-item button { min-width: 44px; min-height: 44px; }
/* panchang */
.pt-avoid td:first-child { border-left: 4px solid var(--bad); }
.pt-good td:first-child { border-left: 4px solid var(--ok); }
.pt-neutral td:first-child { border-left: 4px solid var(--border); }
.pt-now td { background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 600; }
.pt-sun { color: var(--text-2); font-size: 0.9rem; }
/* fonts */
.ft-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.ft-row { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.6rem; align-items: center; padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ft-name { grid-column: 1 / -1; font-size: 0.75rem; color: var(--text-2); }
.ft-val { font-size: 1.15rem; overflow-wrap: anywhere; }
/* caption counter */
.cc-preview { padding: 0.75rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
/* recorder */
.vr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.vr-item { display: grid; gap: 0.4rem; padding: 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.vr-item .btn { justify-self: start; }
.wt-timer { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* app icon */
.ai-prevs { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.ai-prev { border-radius: 22.5%; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
/* sorting */
.sv-canvas { display: block; width: 100%; height: 260px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); --sv-bar: #94a3b8; --sv-cmp: #f59e0b; --sv-swap: #ef4444; --sv-done: #22c55e; }
/* jaap counter */
.jp-ring { --p: 0; display: grid; place-items: center; width: min(260px, 70vw); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--border) 0); }
.jp-tap { width: 86%; aspect-ratio: 1; border-radius: 50%; border: 0; background: var(--surface, var(--bg)); color: var(--text); font: inherit; cursor: pointer; display: grid; place-content: center; gap: 0.25rem; touch-action: manipulation; }
.jp-tap:active { transform: scale(0.98); }
.jp-tap small { color: var(--text-2); }
@media print {
  body:has([data-webtool="bibleplan"]) :is(.site-header, .site-footer, .breadcrumb, .hero, .cta, .related, .section, #i18n-switcher, .tool-row, .wt-btns, .smart-banner) { display: none !important; }
  body:has([data-webtool="bibleplan"]) a { color: inherit; text-decoration: none; }
}
.wt-field.is-result input { font-weight: 700; border-color: var(--accent); }
.tool [hidden] { display: none !important; }
.wt-table tbody th { text-transform: none; letter-spacing: normal; font-size: inherit; font-weight: 600; color: var(--text); }
.tool input[type="color"] { height: 44px; padding: 2px 4px; min-width: 64px; }
/* piano: put each black key on the boundary between its white keys
   (the 25 keys always start on C, so the 15 white keys and the black-key slots are fixed) */
.pk-b:nth-child(2) { left: calc(100% / 15 * 1); }
.pk-b:nth-child(4) { left: calc(100% / 15 * 2); }
.pk-b:nth-child(7) { left: calc(100% / 15 * 4); }
.pk-b:nth-child(9) { left: calc(100% / 15 * 5); }
.pk-b:nth-child(11) { left: calc(100% / 15 * 6); }
.pk-b:nth-child(14) { left: calc(100% / 15 * 8); }
.pk-b:nth-child(16) { left: calc(100% / 15 * 9); }
.pk-b:nth-child(19) { left: calc(100% / 15 * 11); }
.pk-b:nth-child(21) { left: calc(100% / 15 * 12); }
.pk-b:nth-child(23) { left: calc(100% / 15 * 13); }
/* phones: one octave at a time (Lowest C moves it) so every key is a 44px+ target;
   black keys get a 44px hit area with a narrower visible key */
@media (max-width: 759px) {
  [data-keys] { min-width: 0; }
  .pk:nth-child(n+13) { display: none; }
  .pk-b { width: 44px; border: 0; border-inline: 7px solid transparent; background-clip: padding-box; }
  .pk-b:nth-child(2) { left: calc(100% / 7 * 1); }
  .pk-b:nth-child(4) { left: calc(100% / 7 * 2); }
  .pk-b:nth-child(7) { left: calc(100% / 7 * 4); }
  .pk-b:nth-child(9) { left: calc(100% / 7 * 5); }
  .pk-b:nth-child(11) { left: calc(100% / 7 * 6); }
}