/* static/css/brand.css */
:root {
  --primary: #174a7e;  /* match your logo */
  --accent: #e8f1fb;
}
.btn, .button.primary {
  background: var(--primary);
  color: #fff;
  border-radius: 8px;
  padding: 0.6rem 1rem;
  text-decoration: none;
  display: inline-block;
}
a { color: var(--primary); }
section.narrow { max-width: 720px; margin: 2rem auto; padding: 0 1rem; }

/* Tone Selector Styles */
.tone-selector {
  background: var(--accent, #f9f9f9);
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  max-width: 700px;
  margin: 1.5rem auto;
}

.tone-selector label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  padding: 0.5rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
  /* Mobile-friendly touch target */
  min-height: 44px;
  -webkit-tap-highlight-color: rgba(23, 74, 126, 0.1);
  user-select: none;
  -webkit-user-select: none;
}

.tone-selector label span {
  line-height: 1.5;
  /* Ensure span doesn't block clicks */
  pointer-events: none;
}

/* Desktop hover */
.tone-selector label:hover {
  background: rgba(23, 74, 126, 0.06);
}

/* Mobile/touch active state */
.tone-selector label:active {
  background: rgba(23, 74, 126, 0.12);
}

.tone-selector input[type="radio"],
.tone-selector input[type="checkbox"] {
  accent-color: var(--primary, #174a7e);
  margin: 0.3rem 0 0 0;
  /* Make checkbox larger and easier to tap on mobile */
  min-width: 20px;
  min-height: 20px;
  cursor: pointer;
  flex-shrink: 0;
}

.tone-selector strong {
  color: var(--primary, #174a7e);
}