/* ============================================================
   Landscapey — tools.css
   Interactive blog tools embedded in article bodies via the
   [[tool:*]] token-include seam in blog-post.php (plan e88326).
   Editorial-garden language (sage/moss/paper). Namespaced .pl-*
   for the price-increase-letter generator; add sibling tools
   under their own prefix.
   ============================================================ */

/* ── Shell ─────────────────────────────────────────────────
   Sits inside .bl-article-body (720px measure). Breaks out a
   little wider on desktop to give the two-pane workbench room
   without ever letting the page scroll sideways. */
.pl-tool {
  --pl-sheet: #fffdf8;
  margin-block: clamp(34px, 5vw, 56px);
  padding: clamp(20px, 3vw, 30px);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(148, 165, 133, 0.14), transparent 60%),
    var(--paper-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
}
@media (min-width: 980px) {
  .pl-tool { width: 860px; margin-inline: -70px; padding: 34px; }
}

.pl-tool__head { margin: 0 0 clamp(18px, 2.5vw, 24px); }
.pl-tool__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--moss);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.pl-tool__eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--moss); }
.pl-tool__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 10px 0 6px;
}
.pl-tool__title em { font-style: italic; color: var(--moss); }
.pl-tool__sub { margin: 0; max-width: 52ch; color: var(--ink-soft); font-size: 14.5px; }

/* ── Workbench grid ────────────────────────────────────────
   Stacked on mobile; controls | live letter on desktop. */
.pl-tool__grid { display: grid; gap: clamp(20px, 3vw, 30px); }
@media (min-width: 980px) {
  .pl-tool__grid { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); align-items: start; }
}

/* ── Controls ──────────────────────────────────────────────*/
.pl-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.pl-field { display: flex; flex-direction: column; gap: 6px; }
.pl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pl-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.pl-label .pl-opt { font-weight: 400; color: var(--mist); letter-spacing: 0; }
.pl-input,
.pl-select,
.pl-textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 10px 12px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.pl-textarea { resize: vertical; min-height: 62px; line-height: 1.5; }
.pl-input:focus,
.pl-select:focus,
.pl-textarea:focus {
  outline: none;
  border-color: var(--moss);
  box-shadow: 0 0 0 3px rgba(63, 82, 53, 0.14);
}
.pl-input::placeholder, .pl-textarea::placeholder { color: var(--mist); }
.pl-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f5235' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
  padding-right: 34px;
}
.pl-hint { font-size: 12px; line-height: 1.45; color: var(--mist); margin: 2px 0 0; }
.pl-hint strong { color: var(--moss); font-weight: 600; }

/* Tone segmented control */
.pl-tone { display: inline-flex; padding: 3px; gap: 3px; background: #fff; border: 1px solid var(--line-strong); border-radius: 999px; }
.pl-tone label {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.pl-tone input { position: absolute; opacity: 0; pointer-events: none; }
.pl-tone label:hover { color: var(--ink); }
.pl-tone input:checked + span { color: var(--paper); }
.pl-tone label:has(input:checked) { background: var(--moss-deep); color: var(--paper); }
.pl-tone input:focus-visible + span { text-decoration: underline; }

/* Custom-reason field hidden until "Something else" is picked */
.pl-field[data-when-custom] { display: none; }
.pl-field[data-when-custom].is-on { display: flex; }

/* ── Live letter sheet ─────────────────────────────────────*/
.pl-preview { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pl-sheet {
  background: var(--pl-sheet);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--moss);
  border-radius: 4px 4px 10px 10px;
  padding: clamp(20px, 3.2vw, 32px);
  box-shadow: 0 24px 46px -30px rgba(28, 31, 26, 0.4), 0 2px 0 rgba(255,255,255,0.6) inset;
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--ink);
  min-height: 320px;
  overflow-wrap: break-word;
}
.pl-sheet__date {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--mist);
  text-align: right;
  margin: 0 0 20px;
}
.pl-sheet p { margin: 0 0 14px; }
.pl-sheet p:last-child { margin-bottom: 0; }
.pl-sheet__sign { margin-top: 20px; }
.pl-sheet__sign span { display: block; }
.pl-sheet__sign .pl-sign-close { margin-bottom: 6px; color: var(--ink-soft); }
.pl-sheet__sign .pl-sign-name { font-weight: 600; }
.pl-sheet__sign .pl-sign-biz { color: var(--ink-soft); }
.pl-sheet .pl-ph { color: var(--sage); font-style: italic; }

/* Actions under the sheet */
.pl-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pl-actions .btn { padding: 11px 20px; font-size: 14px; }
.pl-btn-copy.is-done { background: var(--moss); color: var(--paper); }
.pl-trust {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--mist); margin: 4px 0 0;
}
.pl-trust svg { width: 13px; height: 13px; flex: none; stroke: var(--sage); }

/* ── Footer CTA ────────────────────────────────────────────*/
.pl-cta {
  margin: clamp(22px, 3vw, 30px) 0 0;
  padding-top: clamp(18px, 2.5vw, 24px);
  border-top: 1px solid var(--line-strong);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.pl-cta p { margin: 0; max-width: 46ch; font-size: 14px; color: var(--ink-soft); }
.pl-cta p strong { color: var(--ink); font-weight: 600; }
.pl-cta .btn { flex: none; }

@media (max-width: 480px) {
  .pl-row { grid-template-columns: 1fr; }
}