/* Robot Guard widget (2026-09-19) — ported from GigantooVisualBoards6
   assets/css/robot-guard.css; colours kept WCAG AA on the light card, plus a
   dark-theme block for the footer newsletter band ([data-bs-theme=dark]). */
.robot-guard { display: grid; gap: 8px; min-width: 0; margin-top: .75rem; text-align: left; }
.rg-box {
  display: grid; position: relative; grid-template-columns: 40px minmax(0, 1fr) 72px; gap: 11px; align-items: center;
  min-height: 78px; padding: 12px 10px; overflow: hidden; color: #20232a;
  background: radial-gradient(circle at 84% 22%, rgb(49 87 213 / 8%), transparent 34px), #f8fafb;
  border: 1px solid #d8e0e8; border-radius: 8px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.rg-box::before {
  position: absolute; inset: 0; content: ""; opacity: 0; transition: opacity .22s ease;
  background: linear-gradient(135deg, rgb(49 87 213 / 10%), rgb(42 157 165 / 8%) 42%, rgb(242 109 91 / 8%));
}
.robot-guard:hover .rg-box, .rg-working .rg-box { border-color: #c5d5e5; box-shadow: 0 10px 24px rgb(49 87 213 / 10%); }
.robot-guard:hover .rg-box::before, .rg-working .rg-box::before, .rg-verified .rg-box::before { opacity: 1; }
.robot-guard .rg-check {
  display: grid; position: relative; z-index: 1; width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0;
  place-items: center; color: #fff; background: #fff; border: 2px solid #8a97a6; border-radius: 8px; box-shadow: none; cursor: pointer;
}
.robot-guard .rg-check:hover, .robot-guard .rg-check:focus-visible { background: #fff; border-color: #3157d5; box-shadow: 0 0 0 4px rgb(49 87 213 / 15%); outline: none; }
.robot-guard .rg-check:disabled { cursor: wait; opacity: 1; }
.rg-check span {
  width: 17px; height: 9px; border-bottom: 3px solid currentColor; border-left: 3px solid currentColor; opacity: 0;
  transform: rotate(-45deg) translate(1px, -1px) scale(.72); transition: opacity .16s ease, transform .18s ease;
}
.rg-copy { display: grid; gap: 2px; position: relative; z-index: 1; min-width: 0; }
.rg-copy strong, .rg-copy small, .rg-visual span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-copy strong { font-size: .92rem; font-weight: 800; line-height: 1.2; }
.rg-copy small, .rg-status, .rg-brand { color: #5b6673; font-size: .74rem; font-weight: 600; }
.rg-brand { display: block; overflow-wrap: anywhere; white-space: normal; color: #465263; font-size: .66rem; line-height: 1.25; }
.rg-visual { display: grid; position: relative; z-index: 1; justify-items: center; gap: 3px; min-width: 0; }
.rg-logo { display: block; width: 46px; height: 46px; filter: drop-shadow(0 8px 14px rgb(42 157 165 / 16%)); transform-origin: center; transition: filter .18s ease, transform .18s ease; }
.rg-visual span { max-width: 100%; color: #465263; font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.rg-meter { position: relative; z-index: 1; grid-column: 1 / -1; height: 8px; overflow: hidden; background: #e5ebf1; border-radius: 999px; }
.rg-meter span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #2a9da5, #3157d5); border-radius: inherit; transition: width .18s ease; }
.rg-status { min-height: 16px; margin: 0; }
.robot-guard.rg-working .rg-check, .robot-guard.rg-working .rg-check:hover { border-color: #3157d5; }
.rg-working .rg-check::after { width: 16px; height: 16px; border: 3px solid #d9e1ea; border-top-color: #3157d5; border-radius: 50%; content: ""; animation: rg-spin .8s linear infinite; }
.rg-working .rg-check span { display: none; }
/* Doubled selector so the verified state outranks :hover (the pointer is still over the box right after the click). */
.robot-guard.rg-verified .rg-check, .robot-guard.rg-verified .rg-check:hover { background: #23845f; border-color: #23845f; box-shadow: none; }
.rg-verified .rg-check span { opacity: 1; transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.rg-verified .rg-meter span { background: #23845f; }
.rg-verified .rg-logo { filter: drop-shadow(0 8px 14px rgb(47 157 114 / 20%)); transform: scale(1.03); }
.rg-error .rg-box, .rg-error .rg-challenge { border-color: #e9a59c; }
.rg-error .rg-status { color: #b3261e; }
.rg-challenge { display: grid; gap: 10px; padding: 12px; background: #fff; border: 1px solid #d8e0e8; border-radius: 8px; }
.rg-challenge[hidden] { display: none; }
.rg-challenge-head { display: grid; gap: 4px; }
.rg-challenge-head strong { color: #20232a; font-size: .84rem; font-weight: 800; }
.rg-challenge-head span { color: #b3261e; font-size: .76rem; font-weight: 600; }
.rg-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.robot-guard .rg-tile {
  min-height: 42px; padding: 0 8px; color: #20232a; background: #f7f9fb; border: 1px solid #d8e0e8; border-radius: 8px;
  box-shadow: none; font-size: .78rem; font-weight: 800; text-transform: capitalize; cursor: pointer;
}
.robot-guard .rg-tile:hover, .robot-guard .rg-tile:focus-visible { color: #20232a; background: #fff; border-color: #3157d5; box-shadow: 0 0 0 4px rgb(49 87 213 / 12%); outline: none; }
.rg-tile-mint { border-left: 5px solid #2f9d72 !important; }
.rg-tile-sky { border-left: 5px solid #3157d5 !important; }
.rg-tile-rose { border-left: 5px solid #f26d5b !important; }
.rg-tile-sun { border-left: 5px solid #f3b23f !important; }
.rg-tile-slate { border-left: 5px solid #657181 !important; }
.rg-tile-violet { border-left: 5px solid #7357d7 !important; }
@keyframes rg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .rg-box, .rg-box::before, .rg-logo, .rg-check span, .rg-working .rg-check::after { animation: none; transition: none; }
}
@media (max-width: 520px) {
  .rg-box { grid-template-columns: 38px minmax(0, 1fr) 54px; gap: 8px; }
  .rg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-logo { width: 38px; height: 38px; }
  .rg-visual span { font-size: .55rem; }
  .rg-brand { font-size: .6rem; }
}
/* Dark footer band (site-foot.php sets data-bs-theme="dark" on the container). */
[data-bs-theme="dark"] .rg-box { color: #f3f5f7; background: radial-gradient(circle at 84% 22%, rgb(49 87 213 / 20%), transparent 34px), #262a33; border-color: #3b4250; }
[data-bs-theme="dark"] .rg-copy small, [data-bs-theme="dark"] .rg-status, [data-bs-theme="dark"] .rg-brand, [data-bs-theme="dark"] .rg-visual span { color: #b9c2cf; }
[data-bs-theme="dark"] .rg-meter { background: #3b4250; }
[data-bs-theme="dark"] .rg-challenge { background: #262a33; border-color: #3b4250; }
[data-bs-theme="dark"] .rg-challenge-head strong { color: #f3f5f7; }
[data-bs-theme="dark"] .robot-guard .rg-tile { color: #f3f5f7; background: #1f232b; border-color: #3b4250; }
[data-bs-theme="dark"] .robot-guard .rg-tile:hover, [data-bs-theme="dark"] .robot-guard .rg-tile:focus-visible { background: #2c313c; }
[data-bs-theme="dark"] .rg-error .rg-status, [data-bs-theme="dark"] .rg-challenge-head span { color: #ff8a80; }
