/* Shared styling for the tools backed by tools.smartwp.com.
   Extends the flat card language already used by the salt / version / counter
   tools: neutral surfaces, alpha hairlines, no accent borders or glow. */

.swp-t{max-width:760px;margin:0 auto 2rem;font-family:inherit;text-align:left}
.swp-t *{box-sizing:border-box}

.swp-t__label{display:block;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#111827;margin:0 0 10px}
.swp-t__hint{margin:0 0 12px;font-size:14px;line-height:1.6;color:#6b7280}
.swp-t__row{display:flex;gap:8px;flex-wrap:wrap}
.swp-t__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;align-items:start}

.swp-t__field{display:flex;flex-direction:column;gap:5px;min-width:0;align-self:start}
.swp-t__field span{font-size:13px;font-weight:600;color:#374151}
.swp-t__field em{font-style:normal;font-weight:400;color:#9ca3af}

.swp-t__input,.swp-t__select,.swp-t__area{width:100%;padding:11px 14px;font-size:15px;font-family:inherit;color:#111827;background:#fff;border:1px solid #d1d5db;border-radius:8px}
/* Only grow beside a button in a horizontal row. Scoped deliberately: inside
   .swp-t__field the flex direction is column, so an unscoped flex-basis lands
   on the vertical axis and renders a 260px-tall text input. */
.swp-t__row > .swp-t__input{flex:1 1 260px;min-width:0}
.swp-t__field > .swp-t__input,.swp-t__field > .swp-t__select{flex:0 0 auto}
.swp-t__area{min-height:150px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.55}
.swp-t__input:focus,.swp-t__select:focus,.swp-t__area:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.15)}

.swp-t__btn{flex:0 0 auto;padding:11px 20px;font-size:15px;font-weight:600;font-family:inherit;color:#fff;background:#2563eb;border:1px solid #2563eb;border-radius:8px;cursor:pointer;transition:background .15s}
.swp-t__btn:hover:not(:disabled){background:#1d4ed8}
.swp-t__btn:disabled{opacity:.65;cursor:default}
.swp-t__btn--ghost{color:#374151;background:#fff;border-color:#d1d5db}
.swp-t__btn--ghost:hover:not(:disabled){background:#f3f4f6}
.swp-t__actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0;align-items:center}

/* "Detect from my site" helper row */
.swp-t__assist{margin:0 0 16px;padding:14px 16px;background:#f7f7f8;border:1px solid rgba(17,24,39,.10);border-radius:8px}
.swp-t__assist p{margin:0 0 9px;font-size:14px;line-height:1.55;color:#4b5563}
.swp-t__assist .swp-t__row{gap:8px}
.swp-t__status{margin:9px 0 0;font-size:13.5px;line-height:1.5;color:#6b7280}
.swp-t__status--ok{color:#166534}
.swp-t__status--err{color:#9a3412}
.swp-t__pick{padding:1px 8px;font:inherit;font-size:13px;font-weight:600;color:#111827;background:#fff;border:1px solid #d1d5db;border-radius:6px;cursor:pointer}
.swp-t__pick:hover{background:#f3f4f6}

.swp-t__out:empty{display:none}
.swp-t__card{margin:14px 0 0;padding:18px 20px;background:#f7f7f8;border:1px solid rgba(17,24,39,.10);border-radius:8px}
.swp-t__card--plain{background:#fff}
.swp-t__msg{margin:0;font-size:15px;line-height:1.6;color:#4b5563}
.swp-t__err{color:#9a3412}

.swp-t__verdict{margin:0;font-size:17px;line-height:1.5;color:#111827;font-weight:600}
.swp-t__sub{margin:8px 0 0;font-size:14.5px;line-height:1.65;color:#4b5563}

/* Progress. AI endpoints take 20-40s, so the wait needs to look deliberate
   rather than hung. */
.swp-t__wait{display:flex;align-items:center;gap:10px;margin:14px 0 0;padding:14px 18px;background:#f7f7f8;border:1px solid rgba(17,24,39,.10);border-radius:8px;font-size:14.5px;color:#4b5563}
.swp-t__spin{flex:0 0 auto;width:15px;height:15px;border:2px solid rgba(17,24,39,.18);border-top-color:#2563eb;border-radius:50%;animation:swp-t-spin .8s linear infinite}
@keyframes swp-t-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.swp-t__spin{animation-duration:2.4s}}
.swp-t__elapsed{margin-left:auto;font-variant-numeric:tabular-nums;color:#9ca3af;font-size:13px}

/* Key/value rows, matching the version checker */
.swp-t__rows{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px solid rgba(17,24,39,.08)}
.swp-t__rows li{display:flex;justify-content:space-between;gap:14px;margin:0 0 7px;font-size:14px;line-height:1.5}
.swp-t__rows li:last-child{margin-bottom:0}
.swp-t__rows span{color:#6b7280}
.swp-t__rows b{color:#111827;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}

/* Plugin / result list */
.swp-t__list{list-style:none;margin:14px 0 0;padding:0}
.swp-t__item{padding:12px 0;border-top:1px solid rgba(17,24,39,.08)}
.swp-t__item:first-child{border-top:0}
.swp-t__item-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.swp-t__name{font-weight:600;color:#111827;font-size:15px}
.swp-t__meta{font-size:13px;color:#9ca3af;margin-left:auto;font-variant-numeric:tabular-nums}
.swp-t__note{margin:6px 0 0;font-size:13.5px;line-height:1.6;color:#6b7280}

/* Risk badges. Colour carries meaning here, so each also states its label in
   text for anyone who cannot distinguish them. */
.swp-t__badge{display:inline-block;padding:2px 9px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.swp-t__badge--ok{color:#166534;background:#f0fdf4;border-color:rgba(22,101,52,.20)}
.swp-t__badge--stale{color:#854d0e;background:#fefce8;border-color:rgba(133,77,14,.20)}
.swp-t__badge--abandoned{color:#9a3412;background:#fff7ed;border-color:rgba(154,52,18,.22)}
.swp-t__badge--closed{color:#991b1b;background:#fef2f2;border-color:rgba(153,27,27,.22)}
.swp-t__badge--notlisted{color:#374151;background:#f3f4f6;border-color:rgba(55,65,81,.18)}

/* Ordered steps */
.swp-t__steps{margin:12px 0 0;padding-left:20px}
.swp-t__steps li{margin:0 0 9px;font-size:14.5px;line-height:1.6;color:#374151}
.swp-t__steps li:last-child{margin-bottom:0}
.swp-t__steps strong{color:#111827}

/* Generated code output */
.swp-t__code{margin:14px 0 0;padding:16px;background:#111827;border-radius:8px;overflow-x:auto}
.swp-t__code pre{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.6;color:#e5e7eb;white-space:pre}

.swp-t__foot{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:#9ca3af}

@media (max-width:560px){
  .swp-t__btn{width:100%}
  .swp-t__meta{margin-left:0;width:100%}
}