/* ============================================================
   WP Relieve — Tools (single-tool.php) section + widget styles.
   Built on the wpr.css design tokens (--accent, --ink2, --line,
   --cream, --text, --dim …). Loaded only on single `tool` posts.
   ============================================================ */

/* ---------- hero ---------- */
.wpr-tool-hero__head{ max-width:760px; margin:0 auto; text-align:center; }
.wpr-tool-hero__sub{ margin:18px auto 0; max-width:600px; }
.wpr-tool-hero__app{ margin-top:clamp(32px,5vw,52px); }
/* Half the global .wpr-h1 size (clamp(40px,6.6vw,96px)), scoped to the tool hero. */
.wpr-tool-hero .wpr-h1{ font-size:calc(var(--ts,1) * clamp(20px,3.3vw,48px)); }

/* ---------- image cleaner widget ---------- */
.wpr-ic{ max-width:760px; margin:0 auto; }
.wpr-ic__drop{ position:relative; display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center; padding:clamp(30px,6vw,56px) 24px; border:2px dashed var(--line); border-radius:20px;
  background:var(--ink2); cursor:pointer; transition:border-color .15s, background .15s; }
.wpr-ic__drop:hover, .wpr-ic__drop.is-drag{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 5%, var(--ink2)); }
.wpr-ic__input{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }
.wpr-ic__drop-ic{ color:var(--accent); }
.wpr-ic__drop-title{ font-family:var(--sans); font-weight:600; font-size:clamp(16px,2vw,19px); color:var(--cream); }
.wpr-ic__drop-link{ color:var(--accent); text-decoration:underline; }
.wpr-ic__drop-sub{ font-size:13.5px; color:var(--dimmer); }

.wpr-ic__controls{ display:flex; gap:18px; flex-wrap:wrap; margin-top:20px; }
.wpr-ic__field{ flex:1 1 220px; }
.wpr-ic__label{ display:block; font-size:13px; font-weight:600; color:var(--cream); margin-bottom:8px; }
.wpr-ic__select{ width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--ink2); color:var(--text); font-family:var(--sans); font-size:15px; }
.wpr-ic__range{ width:100%; accent-color:var(--accent); margin-top:10px; }

.wpr-ic__privacy{ display:flex; align-items:center; gap:8px; margin:18px 0 0; font-size:14px; color:var(--dim); }
.wpr-ic__privacy svg{ color:var(--accent); flex-shrink:0; }
.wpr-ic__privacy.is-busy{ color:var(--accent); }

.wpr-ic__list{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.wpr-ic__item{ display:flex; align-items:center; gap:16px; padding:12px; border:1px solid var(--line);
  border-radius:14px; background:var(--ink2); }
.wpr-ic__item.is-processing{ opacity:.65; }
.wpr-ic__item.is-error .wpr-ic__sizes{ color:#c0392b; }
.wpr-ic__thumb{ width:56px; height:56px; border-radius:10px; object-fit:cover; flex-shrink:0; background:var(--ink3); }
.wpr-ic__meta{ flex:1 1 auto; min-width:0; }
.wpr-ic__name{ font-weight:600; color:var(--cream); font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wpr-ic__sizes{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; font-size:13.5px; color:var(--dim); }
.wpr-ic__newsize{ color:var(--cream); font-weight:600; }
.wpr-ic__arrow{ color:var(--dimmer); }
.wpr-ic__save{ padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; }
.wpr-ic__save.is-down{ background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent-dk); }
.wpr-ic__save.is-up{ background:color-mix(in srgb, #c0392b 12%, transparent); color:#c0392b; }
.wpr-ic__dl{ padding:11px 20px; font-size:14px; flex-shrink:0; }
.wpr-ic__actions{ margin-top:16px; }

/* ---------- section: cards (features / use cases / comparison) ---------- */
.wpr-tool-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px; }
.wpr-tool-card{ padding:26px; border:1px solid var(--line); border-radius:18px; background:var(--ink2); }
.wpr-tool-card__ic{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:12px; background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); margin-bottom:16px; }
.wpr-tool-card h3{ color:var(--cream); margin:0; }
.wpr-tool-card p{ margin-top:10px; }
.wpr-tool-card--feature{ border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); }
.wpr-tool-card--feature .wpr-tool-card__ic{ background:var(--accent2); color:#fff; }

/* ---------- section: reasons / value props ---------- */
.wpr-tool-reasons{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px 36px; }
.wpr-tool-reason{ padding-left:18px; border-left:3px solid var(--accent); }
.wpr-tool-reason h3{ color:var(--cream); margin:0; }
.wpr-tool-reason p{ margin-top:8px; }

/* ---------- section: steps ---------- */
.wpr-tool-steps{ list-style:none; margin:0 auto; padding:0; max-width:720px; display:flex; flex-direction:column; gap:22px; }
.wpr-tool-step{ display:flex; gap:18px; align-items:flex-start; }
.wpr-tool-step__n{ flex-shrink:0; width:46px; height:46px; border-radius:999px; background:var(--accent2); color:#fff;
  font-family:var(--serif); font-size:21px; display:flex; align-items:center; justify-content:center; }
.wpr-tool-step h3{ color:var(--cream); margin:0; }
.wpr-tool-step p{ margin-top:6px; }

/* ---------- section: specifications ---------- */
.wpr-tool-specs{ max-width:760px; margin:0 auto; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--ink2); }
.wpr-tool-spec{ display:flex; gap:20px; padding:16px 24px; border-top:1px solid var(--line); margin:0; }
.wpr-tool-spec:first-child{ border-top:0; }
.wpr-tool-spec dt{ flex:0 0 220px; font-weight:600; color:var(--cream); margin:0; }
.wpr-tool-spec dd{ flex:1 1 auto; margin:0; color:var(--dim); }

/* ---------- contract generator widget ---------- */
.wpr-cg{ max-width:760px; margin:0 auto; }
.wpr-cg__form{ padding:clamp(22px,4vw,36px); border:1px solid var(--line); border-radius:20px; background:var(--ink2); text-align:left; }
.wpr-cg__grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.wpr-cg__field{ display:flex; flex-direction:column; gap:8px; }
.wpr-cg__field--wide{ grid-column:1 / -1; }
.wpr-cg__label{ font-size:13px; font-weight:600; color:var(--cream); }
.wpr-cg__opt{ font-weight:400; color:var(--dimmer); }
.wpr-cg__input{ padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--ink);
  color:var(--text); font-family:var(--sans); font-size:15px; width:100%; }
.wpr-cg__input:focus{ outline:none; border-color:var(--accent); }
.wpr-cg__file{ padding:11px 13px; border:1px dashed var(--line); border-radius:12px; background:var(--ink);
  color:var(--dim); font-family:var(--sans); font-size:14px; width:100%; cursor:pointer; }
.wpr-cg__note{ display:flex; align-items:center; gap:8px; margin:18px 0 0; font-size:14px; color:var(--dim); }
.wpr-cg__note svg{ color:var(--accent); flex-shrink:0; }
.wpr-cg__note.is-busy{ color:var(--accent); }
.wpr-cg__note.is-error,
.wpr-cg__note.is-error svg{ color:#c0392b; }
.wpr-cg__actions{ margin-top:22px; }
.wpr-cg__submit{ width:100%; }

/* ---------- responsive ---------- */
@media (max-width:600px){
  .wpr-ic__item{ flex-wrap:wrap; }
  .wpr-ic__dl{ width:100%; }
  .wpr-tool-spec{ flex-direction:column; gap:4px; padding:14px 18px; }
  .wpr-tool-spec dt{ flex-basis:auto; }
  .wpr-cg__grid{ grid-template-columns:1fr; }
}