/* Tapping Tags - Free Tools (google-review-link, nfc-phone-check, which-product, review-request)
   Reuses the material-redesign.css palette/tokens; adds only tool-specific components. */

.tt-tools-page .tt-section-head { max-width: 760px; margin: 0 auto 32px; text-align: center; }
.tt-tools-page .tt-section-head--left { text-align: left; margin-left: 0; }

/* No lone last word on wrap: short headings balance, body copy wraps prettily.
   The shared .tt-section-head is a single-column CSS grid, whose implicit
   track sizes to content (auto) - a percentage width on the heading resolves
   against that auto track, not the 760px shell, so balance never gets the
   real line width to work with. Forcing the wrapper back to block removes
   the auto-track ambiguity entirely. */
.tt-tools-page .tt-section-head { display: block !important; }
.tt-tools-page h1:not(.tt-vh), .tt-tools-page h2:not(.tt-vh), .tt-tools-page h3:not(.tt-vh) { text-wrap: balance; width: 100%; }
.tt-tools-page p, .tt-tools-page li, .tt-tools-page dd, .tt-tools-page dt,
.tt-tools-page label, .tt-tools-page span, .tt-tools-page a { text-wrap: pretty; }

.tt-privacy-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--tt-material-wash);
  border: 1px solid var(--tt-material-line);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tt-material-ink);
  margin: 0 0 28px;
}
.tt-privacy-note svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.tt-privacy-note strong { color: var(--tt-material-deep); }

/* ---------- Tools hub grid ---------- */
.tt-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 36px 0;
}
@media (max-width: 767px) {
  .tt-tools-grid { grid-template-columns: 1fr; gap: 16px; }
}
.tt-tool-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--tt-material-line);
  border-radius: var(--tt-card-radius, 18px);
  padding: 24px;
  box-shadow: var(--tt-material-shadow);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tt-tool-card:hover, .tt-tool-card:focus-visible { transform: translateY(-2px); box-shadow: 0 28px 60px rgba(3,63,80,.16); }
.tt-tool-card-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(135deg, var(--tt-material-teal), var(--tt-material-cyan));
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.tt-tool-card-icon svg { width: 26px; height: 26px; }
.tt-tool-card h2 { font-size: 20px; margin: 0; color: var(--tt-material-deep); }
.tt-tool-card p { font-size: 15px; line-height: 1.55; color: var(--tt-material-muted); margin: 0; }
.tt-tool-card-cta { margin-top: auto; font-weight: 700; color: var(--tt-material-teal); font-size: 15px; }

/* ---------- Shared panel / stepper ---------- */
.tt-tool-panel {
  background: #fff;
  border: 1px solid var(--tt-material-line);
  border-radius: var(--tt-card-radius, 18px);
  padding: 28px;
  box-shadow: var(--tt-material-shadow);
  margin-bottom: 28px;
}
@media (max-width: 600px) { .tt-tool-panel { padding: 20px 16px; } }

.tt-tool-steps { counter-reset: tt-step; list-style: none; margin: 18px 0 0; padding: 0 0 0 22px; }
.tt-tool-steps li {
  counter-increment: tt-step;
  position: relative;
  padding: 4px 0 4px 40px;
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tt-material-ink);
}
.tt-tool-steps li::before {
  content: counter(tt-step);
  position: absolute; left: 0; top: 2px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--tt-material-teal); color: #fff;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Forms ---------- */
.tt-tool-panel .tt-field { margin-bottom: 18px; }
.tt-tool-panel label.tt-label { display: block; font-weight: 700; font-size: 15px; color: var(--tt-material-deep); margin-bottom: 8px; }
.tt-tool-panel textarea.tt-input,
.tt-tool-panel input[type="text"].tt-input,
.tt-tool-panel select.tt-input {
  width: 100%;
  min-height: 52px;
  font-size: 16px;
  font-family: inherit;
  padding: 12px 14px;
  border: 1.5px solid var(--tt-material-line);
  border-radius: 10px;
  background: var(--tt-material-wash);
  color: var(--tt-material-ink);
  resize: vertical;
}
.tt-tool-panel textarea.tt-input { min-height: 88px; }
.tt-tool-panel select.tt-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%23075b70' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 40px;
  font-weight: 600;
  cursor: pointer;
}
.tt-tool-panel textarea.tt-input:focus,
.tt-tool-panel input[type="text"].tt-input:focus,
.tt-tool-panel select.tt-input:focus { outline: 2px solid var(--tt-material-cyan); outline-offset: 1px; border-color: var(--tt-material-teal); }
.tt-tool-hint { font-size: 13.5px; color: var(--tt-material-muted); margin-top: 6px; }

.tt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px;
  font-size: 15px; font-weight: 700;
  border: none; cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.tt-btn-primary { background: var(--tt-material-deep); color: #fff; }
.tt-btn-primary:hover { filter: brightness(1.3); }
.tt-btn-secondary { background: #fff; color: var(--tt-material-teal); border: 1.5px solid var(--tt-material-teal); min-height: 45px; }
.tt-btn-secondary:hover { background: var(--tt-material-wash); }
.tt-btn:disabled { opacity: .5; cursor: not-allowed; }
.tt-btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* ---------- Choice pills (which-product wizard, phone-check picker) ---------- */
.tt-choice-group { display: flex; flex-wrap: wrap; gap: 10px; }
.tt-choice { position: relative; }
.tt-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tt-choice label {
  display: flex; align-items: center; min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--tt-material-line);
  background: #fff;
  font-size: 15px; font-weight: 600; color: var(--tt-material-ink);
  cursor: pointer; user-select: none;
}
.tt-choice input:checked + label {
  background: var(--tt-material-teal); border-color: var(--tt-material-teal); color: #fff;
}
.tt-choice input:focus-visible + label { outline: 2px solid var(--tt-material-cyan); outline-offset: 2px; }

.tt-wizard-step { display: none; }
.tt-wizard-step.is-active { display: block; }
.tt-wizard-progress { display: flex; gap: 6px; margin-bottom: 22px; }
.tt-wizard-progress span { flex: 1; height: 6px; border-radius: 4px; background: var(--tt-material-line); }
.tt-wizard-progress span.is-done { background: var(--tt-material-teal); }

/* ---------- Result callouts ---------- */
.tt-result-box {
  border-radius: 14px;
  padding: 20px;
  margin-top: 20px;
  border: 1.5px solid var(--tt-material-line);
  background: var(--tt-material-wash);
}
.tt-result-box.is-good { border-color: #1e9e6c; background: #eafaf3; }
.tt-result-box.is-warn { border-color: var(--tt-material-orange); background: #fff4ec; }
.tt-result-box.is-bad { border-color: #d64545; background: #fdeeee; }
.tt-result-box h3 { margin: 0 0 8px; font-size: 18px; color: var(--tt-material-deep); }
.tt-result-box p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; }
.tt-result-box p:last-child { margin-bottom: 0; }
.tt-result-box .tt-result-price { font-weight: 800; color: var(--tt-material-deep); }

/* ---------- QR stage ---------- */
/* [hidden] must always win over the flex display below, or the browser's
   default `[hidden]{display:none}` UA rule loses the cascade to this same-
   specificity class rule and the "empty" QR box renders visible with its
   download buttons looking active before anything has been generated. */
.tt-tools-page [hidden] { display: none !important; }
.tt-qr-stage { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; margin-top: 22px; }
.tt-qr-canvas-wrap {
  flex: none;
  width: 220px; height: 220px;
  background: #fff; border: 1.5px solid var(--tt-material-line); border-radius: 14px;
  display: flex; align-items: center; justify-content: center; padding: 14px;
}
.tt-qr-canvas-wrap canvas, .tt-qr-canvas-wrap svg { width: 100%; height: 100%; }
.tt-qr-side { flex: 1; min-width: 240px; }
.tt-qr-side .tt-btn-row { margin-bottom: 14px; }
.tt-qr-link-display {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  word-break: break-all;
  background: var(--tt-material-wash);
  border: 1px solid var(--tt-material-line);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--tt-material-ink);
}

/* ---------- Print layouts ---------- */
.tt-print-tabs { display: flex; gap: 10px; margin: 26px 0 16px; flex-wrap: wrap; }
.tt-print-tabs button {
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1.5px solid var(--tt-material-line); background: #fff; font-weight: 700; font-size: 14.5px;
  cursor: pointer;
}
.tt-print-tabs button[aria-selected="true"] { background: var(--tt-material-deep); color: #fff; border-color: var(--tt-material-deep); }

.tt-print-preview-wrap { background: #eef4f5; border-radius: 14px; padding: 26px; display: flex; justify-content: center; overflow: auto; }
.tt-print-sheet { background: #fff; box-shadow: 0 10px 30px rgba(3,63,80,.18); position: relative; }
.tt-print-sheet.is-hidden { display: none; }

/* Table tent: 4in x 6in card, folded - show as a 4x3in front panel preview */
.tt-print-sheet--tent { width: 288px; height: 384px; padding: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; border: 1px dashed #ccc; }
.tt-print-sheet--tent .tt-print-qr { width: 160px; height: 160px; }
.tt-print-sheet--tent p { font-size: 13px; margin: 0; color: #333; }
.tt-print-sheet--tent .tt-print-headline { font-size: 16px; font-weight: 800; color: var(--tt-material-deep); }

/* Sticker: 2in circle */
.tt-print-sheet--sticker { width: 192px; height: 192px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 2px solid var(--tt-material-teal); }
.tt-print-sheet--sticker .tt-print-qr { width: 108px; height: 108px; }
.tt-print-sheet--sticker p { font-size: 11px; margin: 0; color: #333; }

/* Receipt footer: 3in wide strip */
.tt-print-sheet--receipt { width: 288px; padding: 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.tt-print-sheet--receipt .tt-print-qr { width: 96px; height: 96px; }
.tt-print-sheet--receipt p { font-size: 11px; margin: 0; text-align: center; color: #111; }
.tt-print-sheet--receipt hr { width: 100%; border: none; border-top: 1px dashed #999; margin: 2px 0; }

@media print {
  body * { visibility: hidden !important; }
  .tt-print-sheet, .tt-print-sheet * { visibility: visible !important; }
  .tt-print-sheet { position: fixed; top: 0; left: 0; box-shadow: none; border: none; margin: 0; }
}

/* ---------- Phone-check ---------- */
.tt-phone-result { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px; }
.tt-phone-diagram { flex: none; width: 140px; height: 260px; border: 2px solid var(--tt-material-line); border-radius: 22px; position: relative; background: #fafcfc; }
.tt-phone-diagram .tt-antenna-zone { position: absolute; left: 50%; transform: translateX(-50%); width: 74px; height: 74px; border-radius: 50%; background: rgba(29,180,218,.22); border: 2px dashed var(--tt-material-cyan); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--tt-material-deep); text-align: center; }
.tt-phone-facts { flex: 1; min-width: 240px; }
.tt-phone-facts dt { font-weight: 700; color: var(--tt-material-deep); font-size: 14px; margin-top: 12px; }
.tt-phone-facts dt:first-child { margin-top: 0; }
.tt-phone-facts dd { margin: 4px 0 0; font-size: 15px; line-height: 1.55; }

/* ---------- Review-request generator ---------- */
.tt-refuse-box { border: 1.5px solid #d64545; background: #fdeeee; border-radius: 14px; padding: 18px 20px; margin-top: 16px; }
.tt-refuse-box h3 { margin: 0 0 8px; color: #a51e1e; font-size: 17px; }
.tt-refuse-box p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #6b1414; }

.tt-policy-box { border-left: 4px solid var(--tt-material-orange); background: var(--tt-material-wash); border-radius: 0 12px 12px 0; padding: 18px 20px; margin: 24px 0; }
.tt-policy-box h2 { font-size: 18px; margin: 0 0 18px; color: var(--tt-material-deep); }
.tt-policy-box ul { margin: 0; padding-left: 22px; }
.tt-policy-box li { font-size: 14.5px; line-height: 1.6; margin-bottom: 6px; }

.tt-generated-copy {
  background: var(--tt-material-wash);
  border: 1.5px solid var(--tt-material-line);
  border-radius: 12px;
  padding: 18px 20px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tt-material-ink);
  white-space: pre-wrap;
}

.tt-copy-feedback { font-size: 13.5px; color: #1e9e6c; font-weight: 700; margin-left: 4px; }

/* Accessible visually-hidden text */
.tt-vh { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }