/* The free Tracking Checker (/tracking-checker). Builds on profit_check.css: the same hero, a one-field form, a
   progress bar while the shop is read, then a "Bold Bento" report: a big score ring and one tile per area. */
.tc-hero { padding-bottom: 8px; }
.tc-form { display: flex; gap: 10px; max-width: 640px; margin: 22px auto 0; }
.tc-field { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 14px; border-radius: 16px;
  background: var(--surface-solid, var(--surface)); border: 1.5px solid var(--line-strong); box-shadow: var(--shadow); }
.tc-field:focus-within { border-color: var(--accent); }
.tc-field svg { flex: 0 0 auto; color: var(--text-3); }
.tc-field input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 15px 0; font-size: 1.05rem; color: var(--text); outline: none; box-shadow: none; }
.tc-form .btn { flex: 0 0 auto; padding: 0 22px; min-height: 52px; border-radius: 16px; white-space: nowrap; }
.tc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tc-err { color: var(--bad); font-weight: 600; margin: 10px auto 0; max-width: 640px; }
.tc-ok { color: var(--good); font-weight: 600; margin: 10px 0 0; }
.tc-trust { margin: 10px auto 0; max-width: 640px; }
.tc-progress { max-width: 640px; margin: 18px auto 0; text-align: left; }
.tc-bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.tc-bar i { display: block; height: 100%; width: 4%; border-radius: 99px; background: var(--aurora, var(--accent)); transition: width .35s ease; }
.tc-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; font-size: .9rem; color: var(--text-3); }
.tc-steps li { padding-left: 22px; position: relative; }
.tc-steps li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line-strong); box-sizing: border-box; }
.tc-steps li.now { color: var(--text); font-weight: 600; }
.tc-steps li.now::before { border-color: var(--accent); animation: tc-pulse 1s infinite; }
.tc-steps li.done { color: var(--text-2); }
.tc-steps li.done::before { background: var(--good); border-color: var(--good); }
@keyframes tc-pulse { 50% { box-shadow: 0 0 0 4px var(--accent-soft); } }
@media (prefers-reduced-motion: reduce) { .tc-bar i { transition: none; } .tc-steps li.now::before { animation: none; } }
.tc-main { gap: 26px; }
.tc-h2 { margin: 0 0 12px; font: 700 clamp(1.25rem, 3vw, 1.6rem)/1.15 var(--font-display); letter-spacing: -.02em; }

/* the report */
.tc-report { display: grid; gap: 18px; scroll-margin-top: 16px; }
.tc-bento { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 16px; }
.tc-tile { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-radius: 26px; color: #fff; min-width: 0;
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .55); background: var(--pc-ink); }
.tc-tile .label { font-weight: 600; font-size: .9rem; color: rgba(255, 255, 255, .85); }
.tc-tile .value { font: 700 clamp(1.3rem, 2.2vw, 1.9rem)/1.1 var(--font-display); letter-spacing: -.03em; overflow-wrap: anywhere; }
.tc-tile .sub { font-size: .86rem; line-height: 1.4; color: rgba(255, 255, 255, .86); overflow-wrap: anywhere; }
.tc-score { background: var(--pc-blue); min-height: 220px; }
.tc-score.bad { background: var(--pc-sun); }
.tc-score.ok { background: linear-gradient(135deg, #f59e0b, #c2410c); }
.tc-area.good { background: linear-gradient(135deg, #10b981, #047857); }
.tc-area.warn { background: linear-gradient(135deg, #f59e0b, #b45309); }
.tc-area.bad { background: var(--pc-sun); }
.tc-ring { --p: 0; width: 118px; height: 118px; border-radius: 50%; display: grid; place-content: center; text-align: center; margin: 6px 0;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .18) 76%, transparent 77% 100%), conic-gradient(#fff calc(var(--p) * 1%), rgba(255, 255, 255, .25) 0); }
.tc-ring b { font: 800 2.6rem/1 var(--font-display); letter-spacing: -.04em; }
.tc-ring small { font-size: .8rem; opacity: .85; }
.tc-two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; }
.tc-two .card, .tc-all, .tc-email, .tc-limits, .tc-faq, .tc-unread { padding: 20px 22px; box-sizing: border-box; min-width: 0; margin: 0; }
.tc-fixes ol { list-style: none; counter-reset: fix; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.tc-fixes li { counter-increment: fix; display: grid; gap: 2px; padding-left: 38px; position: relative; }
.tc-fixes li::before { content: counter(fix); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 9px; display: grid; place-content: center;
  font-weight: 800; font-size: .85rem; color: #fff; background: var(--warn); }
.tc-fixes li.bad::before { background: var(--bad); }
.tc-fixes li span, .tc-all li span { color: var(--text-2); font-size: .9rem; line-height: 1.45; }
.tc-honest { display: flex; flex-direction: column; gap: 8px; border: 2px solid var(--accent); }
.tc-honest h2, .tc-fixes h2, .tc-all h2, .tc-email h2, .tc-limits h2, .tc-faq h2 { margin: 0; }
.tc-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.tc-all details { border-top: 1px solid var(--line); padding: 10px 0; }
.tc-all summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.tc-all ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.tc-all li { display: grid; gap: 2px; padding-left: 22px; position: relative; }
.tc-all li::before, .tc-dot { content: ""; position: absolute; left: 2px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); }
.tc-dot { position: static; display: inline-block; flex: 0 0 auto; }
.tc-all li.good::before, .tc-dot.good { background: var(--good); }
.tc-all li.warn::before, .tc-dot.warn { background: var(--warn); }
.tc-all li.bad::before, .tc-dot.bad { background: var(--bad); }
.tc-pages { margin: 10px 0 0; }
.tc-email { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }
.tc-email form { display: grid; gap: 10px; }
.tc-mailrow { display: flex; gap: 8px; }
.tc-mailrow input { flex: 1 1 auto; min-width: 0; }
.tc-consent { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; color: var(--text-2); line-height: 1.4; }
.tc-consent input { margin-top: 3px; flex: 0 0 auto; }
.tc-unread { display: grid; gap: 8px; }
.tc-unread h2 { margin: 0; }

/* under the tool */
.tc-what { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tc-what li { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.tc-what b { font-size: 1rem; }
.tc-what span:last-child { color: var(--text-2); font-size: .9rem; line-height: 1.45; }
.tc-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-content: center; color: #fff; }
.tc-ico.t-meta { background: linear-gradient(135deg, #2f43f2, #5d6bff); }
.tc-ico.t-dup { background: linear-gradient(135deg, #fb7185, #e11d48); }
.tc-ico.t-google { background: linear-gradient(135deg, #22d3ee, #0e8fb0); }
.tc-ico.t-consent { background: linear-gradient(135deg, #10b981, #047857); }
.tc-limits { display: flex; gap: 18px; align-items: center; justify-content: space-between; }
.tc-limits p { margin: 6px 0 0; color: var(--text-2); }
.tc-faq details { border-top: 1px solid var(--line); padding: 12px 0; }
.tc-faq summary { cursor: pointer; font-weight: 700; }
.tc-faq p { margin: 8px 0 0; color: var(--text-2); line-height: 1.5; }
.tc-guides { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tc-guides a { display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none; height: 100%; box-sizing: border-box; }
.tc-guides a:hover { border-color: var(--accent); }
.tc-guides span { color: var(--text-2); font-size: .88rem; }

@media (max-width: 980px) {
  .tc-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tc-score { grid-column: 1 / -1; min-height: 0; }
  .tc-what { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .tc-form { flex-direction: column; }
  .tc-form .btn { width: 100%; }
  .tc-steps { grid-template-columns: minmax(0, 1fr); }
  .tc-bento { grid-template-columns: minmax(0, 1fr); }
  .tc-area { padding: 16px 20px; }
  .tc-two, .tc-email, .tc-what, .tc-guides { grid-template-columns: minmax(0, 1fr); }
  .tc-limits { flex-direction: column; align-items: flex-start; }
  .tc-mailrow { flex-direction: column; }
}