/* Complaint letter generator styles — single column at every width. */
.kw-clg { display: grid; gap: var(--kw-space-5); }

.kw-clg form { display: grid; gap: var(--kw-space-4); }
.kw-clg__field { display: grid; gap: var(--kw-space-2); }
.kw-clg__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kw-space-4); }
.kw-clg__req { color: var(--kw-danger); }
.kw-clg__select,
.kw-clg__input,
.kw-clg__textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--kw-line-strong);
  border-radius: var(--kw-radius-md);
  background: var(--kw-surface);
  color: var(--kw-text);
  font: inherit;
}
.kw-clg__select:focus-visible,
.kw-clg__input:focus-visible,
.kw-clg__textarea:focus-visible {
  outline: 2px solid var(--kw-focus);
  outline-offset: 1px;
}
.kw-clg__textarea { min-height: 140px; resize: vertical; }

/* Date control. The popup is drawn here so its language follows the page,
   not the browser's OS locale (a native date input ignores html lang). */
.kw-clg__date { position: relative; }
.kw-clg__date-btn {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-align: left;
  cursor: pointer;
}
.kw-clg__date-btn.is-empty { color: var(--kw-muted); }
.kw-clg__cal {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  width: 280px;
  padding: var(--kw-space-3);
  border: 1px solid var(--kw-line-strong);
  border-radius: var(--kw-radius);
  background: var(--kw-surface);
  box-shadow: var(--kw-shadow-lg);
}
.kw-clg__cal-head,
.kw-clg__cal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kw-space-2);
}
.kw-clg__cal-title { font-weight: 600; font-size: var(--kw-fs-sm); }
.kw-clg__cal-nav {
  min-width: 32px;
  min-height: 32px;
  border: 0;
  border-radius: var(--kw-radius-sm);
  background: transparent;
  color: var(--kw-text);
  font: inherit;
  cursor: pointer;
}
.kw-clg__cal-nav:hover { background: var(--kw-surface-2); }
.kw-clg__cal-week,
.kw-clg__cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-top: var(--kw-space-2);
}
.kw-clg__cal-week span {
  color: var(--kw-muted);
  font-size: var(--kw-fs-xs);
  text-align: center;
}
.kw-clg__cal-day {
  min-height: 32px;
  border: 0;
  border-radius: var(--kw-radius-sm);
  background: transparent;
  color: var(--kw-text);
  font: inherit;
  font-size: var(--kw-fs-sm);
  cursor: pointer;
}
.kw-clg__cal-day:hover { background: var(--kw-surface-2); }
.kw-clg__cal-day.is-today { box-shadow: inset 0 0 0 1px var(--kw-line-strong); }
.kw-clg__cal-day.is-selected { background: var(--kw-primary); color: var(--kw-on-primary); }
.kw-clg__cal-day:disabled { color: var(--kw-muted); cursor: default; background: transparent; }
.kw-clg__cal-foot { margin-top: var(--kw-space-2); }
.kw-clg__cal-foot button {
  border: 0;
  background: transparent;
  color: var(--kw-link);
  font: inherit;
  font-size: var(--kw-fs-sm);
  cursor: pointer;
}
.kw-clg__err { margin: 0; color: var(--kw-danger); font-size: var(--kw-fs-sm); }
.kw-clg__meta { display: flex; justify-content: space-between; gap: var(--kw-space-3); align-items: baseline; }
.kw-clg__count { color: var(--kw-muted); font-size: var(--kw-fs-sm); font-variant-numeric: tabular-nums; }

.kw-clg__output { display: grid; gap: var(--kw-space-3); }
.kw-clg__output h2 { margin: 0; font-size: var(--kw-fs-xl); }
.kw-clg__letter {
  margin: 0;
  padding: var(--kw-space-5);
  border: 1px solid var(--kw-line);
  border-radius: var(--kw-radius-lg);
  background: var(--kw-surface-2);
  font: 12.5px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.kw-clg__copy-feedback { align-self: center; color: var(--kw-success); font-size: var(--kw-fs-sm); font-weight: 600; }
.kw-clg__output .kw-hint { margin: 0; }
.kw-clg__output .kw-hint a, .kw-clg__output .kw-hint a:visited { color: var(--kw-accent); }

@media (max-width: 767px) {
  .kw-clg__row { grid-template-columns: 1fr; gap: var(--kw-space-4); }
  .kw-clg__output .kw-actions .kw-btn { width: 100%; }
}