/* ============================================================
   WASP · free tools
   The drafting tool at /write-the-email/.
   Third variant beside legal.css and blog.css, not a new system:
   the page scaffold, the masthead and the pills all come from
   legal.css, and the tokens all come from main.css.
   No GSAP, no Lenis, no preloader - this is a form, and the
   moment it is for is not at a desk.
   ============================================================ */

:root {
  --tool-measure: 44rem;
}

/* The reading column is narrower than a legal document: a form is answered,
   not read, and a wide row of short inputs makes the eye travel for nothing. */
.tool__inner { max-width: 52rem; margin: 0 auto; }

/* ---------- the form ---------- */
.tool__form {
  margin-top: clamp(2.25rem, 5vh, 3.25rem);
  max-width: var(--tool-measure);
}

.tool__group { border: 0; padding: 0; margin: 0 0 clamp(1.75rem, 4vh, 2.5rem); }
.tool__legend {
  display: block;
  margin-bottom: .85rem;
  padding: 0;
}

/* The two situations. Radios, so one is always chosen and the keyboard works
   for free; the input itself is hidden and the label carries the whole target,
   which is what makes it comfortable on a phone. */
.tool__choices { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.tool__choice {
  position: relative;
  display: block;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--outline);
  border-radius: 6px;
  background: var(--surface-low);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.tool__choice:hover { border-color: var(--muted); }

.tool__choice input {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.tool__choice-title {
  display: block;
  font-weight: 650;
  color: var(--white);
  line-height: 1.2;
}
.tool__choice-sub {
  display: block;
  margin-top: .3rem;
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.35;
}

/* Selection is carried by the border and the surface rather than a tick, so it
   reads at a glance on a small screen. */
.tool__choice:has(input:checked) {
  border-color: var(--alabaster);
  background: var(--surface);
}
.tool__choice:has(input:checked) .tool__choice-sub { color: var(--alabaster); }
/* Keyboard focus has to be visible even though the input is not. */
.tool__choice:has(input:focus-visible) { outline: 2px solid var(--slate-2); outline-offset: 2px; }

/* ---------- fields ---------- */
.tool__fields { display: grid; gap: 1.25rem; }
.tool__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.tool__field { display: block; min-width: 0; }

/* Side by side, one label wraps to two lines because it carries a hint and the other does not, so
   the two inputs would sit at different heights. Growing the label pushes both inputs to the
   bottom of their cell and lines them up, without pinning a height that a longer label would break. */
.tool__row .tool__field { display: flex; flex-direction: column; }
.tool__row .tool__label { flex: 1 0 auto; }
.tool__label {
  display: block;
  margin-bottom: .5rem;
  color: var(--alabaster);
  font-size: .95rem;
  font-weight: 600;
}
.tool__hint { display: block; color: var(--muted); font-weight: 400; font-size: .88rem; margin-top: .15rem; }

.tool__field input,
.tool__field textarea {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 1px solid var(--outline);
  border-radius: 6px;
  color: var(--white);
  font: inherit;
  font-size: 1rem;
  padding: .85rem 1rem;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.tool__field textarea { resize: vertical; min-height: 5.5rem; line-height: 1.45; }
.tool__field input::placeholder,
.tool__field textarea::placeholder { color: var(--muted); }
.tool__field input:focus,
.tool__field textarea:focus { border-color: var(--alabaster); }

.tool__field.is-invalid input,
.tool__field.is-invalid textarea { border-color: var(--urgent); }

/* The native calendar picker, matched to the dark inputs. color-scheme makes
   the browser draw its popup calendar dark; the indicator inversion makes the
   little calendar glyph legible on onyx instead of near-black on black. An
   empty date input shows the platform's placeholder text, muted like ours. */
.tool__field input[type="date"] {
  color-scheme: dark;
  min-height: 3.2rem;
}
.tool__field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.75);
  cursor: pointer;
}
.tool__field input[type="date"]:invalid,
.tool__field input[type="date"]:not(:valid) { color: var(--muted); }

/* ---------- actions ---------- */
.tool__actions {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
}

.tool__submit {
  padding: 1rem 1.9rem;
  border-radius: 999px;
  background: var(--white); color: var(--onyx);
  font-weight: 650;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.tool__submit:hover { transform: translateY(-2px); }
.tool__submit[disabled] { opacity: .55; transform: none; }

.tool__count { color: var(--muted); font-size: .88rem; }
.tool__count.is-over { color: var(--warn); }

.tool__error { margin-top: 1rem; color: var(--urgent); }
.tool__error[hidden] { display: none; }

/* ---------- the result ---------- */
.tool__result {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--surface-low);
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  max-width: var(--tool-measure);
}
.tool__result[hidden] { display: none; }

.tool__result-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.tool__subject {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--outline);
  color: var(--white);
  font: inherit;
  font-weight: 650;
  font-size: 1.1rem;
  padding: 0 0 .7rem;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.tool__subject:focus { border-color: var(--alabaster); }

.tool__body {
  width: 100%;
  margin-top: 1.25rem;
  background: transparent;
  border: 1px solid var(--outline);
  border-radius: 6px;
  color: var(--alabaster);
  font: inherit;
  font-size: 1rem;
  line-height: 1.6;
  padding: 1rem;
  resize: vertical;
  min-height: 15rem;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.tool__body:focus { border-color: var(--alabaster); }

.tool__result-actions {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-top: 1.25rem;
}
.tool__copy {
  padding: .8rem 1.6rem;
  border-radius: 999px;
  background: var(--white); color: var(--onyx);
  font-weight: 650;
  transition: transform var(--dur-fast) var(--ease);
}
.tool__copy:hover { transform: translateY(-2px); }
.tool__copy.is-done { background: var(--success); color: var(--onyx); }

.tool__again {
  padding: .8rem 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--outline);
  color: var(--alabaster);
  font: inherit;
  transition: border-color var(--dur-fast) var(--ease);
}
.tool__again:hover { border-color: var(--alabaster); }

.tool__result-note { margin-top: 1.25rem; color: var(--muted); font-size: .92rem; }

/* Live region for the copy confirmation. Present for screen readers, and
   deliberately not a floating toast: the button itself already changed. */
.tool__status { color: var(--success); font-size: .92rem; }

/* ---------- the pitch, under the result ---------- */
.tool__after {
  margin-top: clamp(3rem, 8vh, 5rem);
  padding-top: clamp(2rem, 5vh, 3rem);
  border-top: 1px solid var(--outline-variant);
  max-width: var(--tool-measure);
}
.tool__after h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--white);
}
.tool__after p { margin-top: 1rem; color: var(--alabaster); }
.tool__after .tool__after-actions { margin-top: 1.75rem; display: flex; gap: .75rem; flex-wrap: wrap; }

/* ---------- no script ---------- */
.tool__noscript {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--warn);
  border-radius: 6px;
  color: var(--alabaster);
  max-width: var(--tool-measure);
}

/* ---------- phone ---------- */
@media (max-width: 720px) {
  /* Both grids collapse. minmax(0,1fr) rather than 1fr on purpose: a 1fr track
     carries an implicit min-width:auto and refuses to shrink below its content,
     which is what has pushed this site's pages wider than the viewport twice. */
  .tool__choices,
  .tool__row { grid-template-columns: minmax(0, 1fr); }
  .tool__actions { align-items: flex-start; }
  .tool__submit { width: 100%; text-align: center; }
  .tool__body { min-height: 18rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tool__submit:hover,
  .tool__copy:hover { transform: none; }
}