/* Anti-design treatment for functional tool pages.
   These pages retain existing form IDs and async flows, while the visual system
   follows the homepage's plain, bordered, high-contrast pattern. */

.tool-page {
  background: var(--bg);
  color: var(--text);
}

.tool-page section:first-of-type {
  border-top: none;
}

.tool-page section {
  padding-top: 48px;
  padding-bottom: 48px;
}

.tool-page .container {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.tool-page .max-w-6xl { max-width: 1180px; }
.tool-page .max-w-5xl { max-width: 1040px; }
.tool-page .max-w-4xl { max-width: 860px; }
.tool-page .max-w-3xl { max-width: 760px; }
.tool-page .max-w-2xl { max-width: 680px; }
.tool-page .max-w-xl { max-width: 600px; }
.tool-page .max-w-none { max-width: none; }
.tool-page .mx-auto { margin-left: auto; margin-right: auto; }
.tool-page .mt-1 { margin-top: 4px; }
.tool-page .mt-2 { margin-top: 8px; }
.tool-page .mt-3 { margin-top: 12px; }
.tool-page .mt-4 { margin-top: 16px; }
.tool-page .mt-6 { margin-top: 24px; }
.tool-page .mt-8 { margin-top: 32px; }
.tool-page .mt-10 { margin-top: 40px; }
.tool-page .mb-1 { margin-bottom: 4px; }
.tool-page .mb-2 { margin-bottom: 8px; }
.tool-page .mb-3 { margin-bottom: 12px; }
.tool-page .mb-4 { margin-bottom: 16px; }
.tool-page .mb-5 { margin-bottom: 20px; }
.tool-page .mb-6 { margin-bottom: 24px; }
.tool-page .mb-8 { margin-bottom: 32px; }
.tool-page .mb-10 { margin-bottom: 40px; }
.tool-page .ml-1 { margin-left: 4px; }
.tool-page .ml-2 { margin-left: 8px; }
.tool-page .mr-1 { margin-right: 4px; }
.tool-page .mr-2 { margin-right: 8px; }

.tool-page .px-3 { padding-left: 12px; padding-right: 12px; }
.tool-page .px-4 { padding-left: 16px; padding-right: 16px; }
.tool-page .px-5 { padding-left: 20px; padding-right: 20px; }
.tool-page .px-6 { padding-left: 24px; padding-right: 24px; }
.tool-page .py-1 { padding-top: 4px; padding-bottom: 4px; }
.tool-page .py-2 { padding-top: 8px; padding-bottom: 8px; }
.tool-page .py-3 { padding-top: 12px; padding-bottom: 12px; }
.tool-page .py-10,
.tool-page .py-12 { padding-top: 48px; padding-bottom: 48px; }
.tool-page .pt-16 { padding-top: 64px; }
.tool-page .pb-10 { padding-bottom: 48px; }
.tool-page .p-0 { padding: 0 !important; }
.tool-page .p-1 { padding: 4px; }
.tool-page .p-6 { padding: 24px; }
.tool-page .p-8 { padding: 32px; }

.tool-page .grid { display: grid; }
.tool-page .grid-cols-1 { grid-template-columns: 1fr; }
.tool-page .flex { display: flex; }
.tool-page .inline-flex { display: inline-flex; }
.tool-page .items-center { align-items: center; }
.tool-page .items-start { align-items: flex-start; }
.tool-page .items-stretch { align-items: stretch; }
.tool-page .justify-center { justify-content: center; }
.tool-page .flex-col { flex-direction: column; }
.tool-page .flex-1 { flex: 1 1 0%; }
.tool-page .flex-shrink-0 { flex-shrink: 0; }
.tool-page .gap-2 { gap: 8px; }
.tool-page .gap-3 { gap: 12px; }
.tool-page .gap-4 { gap: 16px; }
.tool-page .gap-6 { gap: 24px; }
.tool-page .gap-8 { gap: 32px; }
.tool-page .space-y-3 > * + * { margin-top: 12px; }
.tool-page .space-y-4 > * + * { margin-top: 16px; }

@media (min-width: 768px) {
  .tool-page .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-page .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tool-page .md\:text-3xl { font-size: 30px; }
}

@media (min-width: 1024px) {
  .tool-page .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-page .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tool-page .lg\:text-4xl { font-size: 40px; }
}

.tool-page .hidden { display: none !important; }
.tool-page .relative { position: relative; }
.tool-page .overflow-hidden { overflow: hidden; }
.tool-page .w-full { width: 100%; }
.tool-page .w-8 { width: 32px; }
.tool-page .h-8 { height: 32px; }
.tool-page .w-12 { width: 48px; }
.tool-page .h-12 { height: 48px; }
.tool-page .h-4 { height: 16px; }
.tool-page .min-h-\[180px\] { min-height: 180px; }
.tool-page .min-h-\[220px\] { min-height: 220px; }

.tool-page .text-center { text-align: center; }
.tool-page .leading-tight { line-height: 1.14; }
.tool-page .font-medium { font-weight: 600; }
.tool-page .font-semibold { font-weight: 700; }
.tool-page .font-bold { font-weight: 800; }
.tool-page .text-xs { font-size: 12px; }
.tool-page .text-sm { font-size: 14px; }
.tool-page .text-xl { font-size: 20px; }
.tool-page .text-2xl { font-size: 26px; }
.tool-page .text-3xl { font-size: 36px; letter-spacing: -0.025em; line-height: 1.08; }
.tool-page .text-primary { color: var(--green); }
.tool-page .text-black,
.tool-page .text-gray-800,
.tool-page .text-gray-900 { color: var(--text); }
.tool-page .text-gray-400 { color: #9a9a92; }
.tool-page .text-gray-500 { color: #77776f; }
.tool-page .text-gray-600 { color: #55554e; }
.tool-page .text-gray-700 { color: #333333; }
.tool-page .text-white { color: #ffffff; }
.tool-page .text-green-500,
.tool-page .text-green-600,
.tool-page .text-green-800 { color: var(--green); }
.tool-page .text-red-600,
.tool-page .text-red-700 { color: #b42318; }
.tool-page .text-amber-600,
.tool-page .text-amber-800 { color: #92400e; }
.tool-page .text-blue-600,
.tool-page .text-blue-800,
.tool-page .text-indigo-600,
.tool-page .text-purple-600,
.tool-page .text-orange-600 { color: var(--green); }

.tool-page .bg-white,
.tool-page .bg-gray-50 {
  background: var(--bg);
}

.tool-page .bg-primary,
.tool-page .bg-green-600 {
  background: var(--green);
}

.tool-page .bg-accent,
.tool-page .bg-accent\/90 {
  background: var(--yellow);
}

.tool-page .bg-primary\/10,
.tool-page .bg-red-100,
.tool-page .bg-amber-100,
.tool-page .bg-green-100,
.tool-page .bg-blue-100,
.tool-page .bg-purple-100,
.tool-page .bg-orange-100,
.tool-page .bg-indigo-100 {
  background: #ffffff;
}

.tool-page .bg-gray-200 {
  background: #deded6;
}

.tool-page .bg-red-50,
.tool-page .bg-amber-50,
.tool-page .bg-blue-50,
.tool-page .bg-green-50 {
  background: #ffffff;
}

.tool-page .rounded,
.tool-page .rounded-md,
.tool-page .rounded-lg,
.tool-page .rounded-xl,
.tool-page .rounded-full,
.tool-page .rounded-tl-2xl,
.tool-page .rounded-br-2xl,
.tool-page .rounded-tl-xl,
.tool-page .rounded-br-xl,
.tool-page .rounded-l-md,
.tool-page .rounded-r-md {
  border-radius: 3px;
}

.tool-page .shadow-card,
.tool-page .shadow-2xl {
  box-shadow: none;
}

.tool-page .ring-1,
.tool-page .ring-primary\/10 {
  box-shadow: none;
}

.tool-page .bg-gradient-to-br {
  background: #ffffff;
  border: 3px solid var(--text);
  box-shadow: 8px 8px 0 0 var(--text);
}

.tool-page .bg-gradient-to-br > .bg-white {
  border: none;
  background: #ffffff;
}

.tool-page .bg-white.rounded-xl,
.tool-page .bg-white.rounded-xl.shadow-card,
.tool-page .bg-white.rounded-xl.shadow-card.p-6,
.tool-page .bg-white.rounded-xl.shadow-card.p-8 {
  background: #ffffff;
  border: 2px solid var(--text);
  box-shadow: 4px 4px 0 0 var(--text);
}

.tool-page .border,
.tool-page .border-2 {
  border-style: solid;
}

.tool-page .border { border-width: 1.5px; }
.tool-page .border-2 { border-width: 2px; }
.tool-page .border-r-0 { border-right-width: 0; }
.tool-page .border-gray-300,
.tool-page .border-primary,
.tool-page .border-accent,
.tool-page .border-accentLight {
  border-color: var(--text);
}

.tool-page .border-red-500 {
  border-color: #b42318 !important;
}

.tool-page input,
.tool-page select,
.tool-page textarea {
  font-family: inherit;
}

.tool-page input[type="text"],
.tool-page input[type="email"] {
  width: 100%;
  min-height: 44px;
  border: 2px solid var(--text);
  background: #ffffff;
  color: var(--text);
  font-size: 14px;
  outline: none;
}

.tool-page input[type="text"]:focus,
.tool-page input[type="email"]:focus {
  box-shadow: 3px 3px 0 0 var(--text);
  transform: translate(-1.5px, -1.5px);
}

.tool-page label {
  display: block;
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tool-page button {
  font-family: inherit;
  cursor: pointer;
}

.tool-page button[type="submit"],
.tool-page button[onclick],
.tool-page #viewCalcBtn,
.tool-page #viewAssessmentBtn,
.tool-page #viewReportBtn,
.tool-page #likeBtn,
.tool-page #noBtn,
.tool-page #resendBtn {
  border: 2px solid var(--text) !important;
  box-shadow: 4px 4px 0 0 var(--text);
  border-radius: 3px;
  transition: all 0.15s ease-in-out;
}

.tool-page button[type="submit"]:hover,
.tool-page button[onclick]:hover,
.tool-page #viewCalcBtn:hover,
.tool-page #viewAssessmentBtn:hover,
.tool-page #viewReportBtn:hover,
.tool-page #likeBtn:hover,
.tool-page #noBtn:hover,
.tool-page #resendBtn:hover {
  background: var(--yellow) !important;
  color: var(--text) !important;
  transform: translate(-1.5px, -1.5px);
  box-shadow: 6px 6px 0 0 var(--text);
}

.tool-page .inline-flex.items-center.gap-2 {
  border: 2px solid var(--text);
  background: #ffffff;
  box-shadow: 3px 3px 0 0 var(--text);
  color: var(--text);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tool-page ul {
  list-style: none;
}

.tool-page .fa-solid {
  color: var(--green);
}

.tool-page .fa-lock {
  color: #9a9a92;
}

.tool-page .fa-xmark,
.tool-page .fa-check,
.tool-page .fa-lightbulb {
  color: var(--green) !important;
}

.tool-page h1 {
  color: var(--text);
}

.tool-page h1 mark,
.tool-page h2 mark {
  color: inherit;
}

.tool-page h2,
.tool-page h3,
.tool-page h4 {
  color: var(--green);
}

.tool-page strong {
  color: var(--text);
}

.tool-page .prose p {
  margin-bottom: 16px;
}

.tool-page .bg-gray-200 > .bg-primary {
  background: var(--green);
}

.tool-page .hover\:bg-primary:hover,
.tool-page .hover\:bg-primary\/90:hover,
.tool-page .hover\:bg-green-700:hover,
.tool-page .hover\:bg-accent\/90:hover {
  background: var(--yellow) !important;
}

.tool-page .hover\:text-white:hover,
.tool-page .hover\:text-white:hover * {
  color: var(--text) !important;
}

.tool-page .hover\:-translate-y-0\.5:hover,
.tool-page .hover\:translate-y-\[-2px\]:hover {
  transform: translate(-1.5px, -1.5px);
}

.tool-page .transition,
.tool-page .duration-200 {
  transition: all 0.15s ease-in-out;
}

.tool-page .text-center .btn,
.tool-page a.inline-flex {
  text-decoration: none;
}

.tool-page a.inline-flex {
  border: 2px solid var(--text);
  background: var(--green);
  color: #ffffff;
  box-shadow: 4px 4px 0 0 var(--text);
}

.tool-page a.inline-flex:hover {
  background: var(--yellow);
  color: var(--text);
  transform: translate(-1.5px, -1.5px);
}

.tool-page .divide-panel {
  border-top: var(--rule);
}

@media (max-width: 768px) {
  .tool-page section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  .tool-page .container {
    padding-left: 0;
    padding-right: 0;
  }

  .tool-page .text-3xl {
    font-size: 32px;
  }

  .tool-page .bg-gradient-to-br {
    box-shadow: 5px 5px 0 0 var(--text);
  }
}