/* CommonHelpSource guided-tool system
   One editorial shell for AI-assisted assessments, drafting tools, and finders. */

body.ai-tool-page {
  --tool-accent: var(--teal);
  margin: 0;
  background: var(--white) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
}

body.ai-tool-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0 7%, rgba(212,205,192,.18) 7% calc(7% + 1px), transparent calc(7% + 1px) 93%, rgba(212,205,192,.18) 93% calc(93% + 1px), transparent calc(93% + 1px));
}

.ai-tool-page[data-tool-family="care"] { --tool-accent: var(--sage); }
.ai-tool-page[data-tool-family="clinical"] { --tool-accent: var(--navy); }
.ai-tool-page[data-tool-family="practice"] { --tool-accent: var(--teal); }

.ai-tool-page .survey-hero,
.ai-tool-page .hero-bg,
.ai-tool-page .generator-hero,
.ai-tool-page .member-hero,
.ai-tool-page .department-hero,
.ai-tool-page .pn-hero,
.ai-tool-page .page-hero {
  position: relative !important;
  margin: 0 !important;
  padding: clamp(46px, 7vw, 76px) 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ink) !important;
  background-image: none !important;
  color: var(--paper) !important;
  text-align: left !important;
  box-shadow: none !important;
}

.ai-tool-page .hero,
.ai-tool-page .ai-tool-chat-hero {
  position: relative !important;
  margin: 0 !important;
  padding: clamp(46px, 7vw, 76px) 24px !important;
  background: var(--ink) !important;
  background-image: none !important;
  color: var(--paper) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.ai-tool-page .ai-tool-chat-hero { margin: -32px calc(50% - 50vw) 36px !important; }
.ai-tool-page .ai-tool-chat-hero > * { max-width: 900px; margin-inline: auto; }
.ai-tool-page .hero h1,
.ai-tool-page .ai-tool-chat-hero h1 { color:var(--paper) !important; font:900 clamp(38px,6vw,68px)/1 var(--font-display) !important; letter-spacing:-.035em !important; -webkit-text-fill-color:currentColor !important; }
.ai-tool-page .hero p,
.ai-tool-page .ai-tool-chat-hero p { color:rgba(245,240,232,.72) !important; }

.ai-tool-page .survey-hero::before,
.ai-tool-page .hero-bg::before,
.ai-tool-page .generator-hero::before,
.ai-tool-page .member-hero::before,
.ai-tool-page .department-hero::before,
.ai-tool-page .pn-hero::before,
.ai-tool-page .page-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  width: auto !important;
  height: 5px !important;
  opacity: 1 !important;
  background: var(--red) !important;
}

.ai-tool-page .hero-container,
.ai-tool-page .hero-content,
.ai-tool-page .generator-shell,
.ai-tool-page .member-shell,
.ai-tool-page .department-shell,
.ai-tool-page .pn-shell,
.ai-tool-page .page-hero-inner,
.ai-tool-page .hero-bg > div {
  width: min(1120px, 100%) !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  text-align: left !important;
}

/* Make the editorial three-part assessment masthead intentional instead of
   inheriting a similarly named DaisyUI component. */
.ai-tool-page .survey-hero .hero-content {
  display: grid !important;
  grid-template-columns: minmax(170px, .65fr) minmax(300px, 1.15fr) minmax(250px, .9fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.ai-tool-page .survey-hero .hero-content > * { min-width: 0; }
.ai-tool-page .survey-hero .hero-content .ai-tool-kicker { margin: 0 !important; }
.ai-tool-page .survey-hero .hero-content h1 { margin: 0 !important; }

.ai-tool-kicker,
.ai-tool-page .pn-eyebrow,
.ai-tool-page .member-kicker,
.ai-tool-page .department-eyebrow {
  display: block;
  margin: 0 0 14px !important;
  color: #e5b5ad !important;
  font: 700 10px/1.4 var(--font-mono) !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
}

.ai-tool-page .survey-hero h1,
.ai-tool-page .hero-bg h1,
.ai-tool-page .generator-hero h1,
.ai-tool-page .member-hero h1,
.ai-tool-page .department-hero h1,
.ai-tool-page .pn-hero h1,
.ai-tool-page .page-hero h1 {
  max-width: 850px !important;
  margin: 0 0 16px !important;
  color: var(--paper) !important;
  font: 900 clamp(38px, 6vw, 68px)/1 var(--font-display) !important;
  letter-spacing: -.035em !important;
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.ai-tool-page .survey-hero p,
.ai-tool-page .hero-bg p,
.ai-tool-page .generator-hero p,
.ai-tool-page .member-hero p,
.ai-tool-page .department-hero p:not(.department-eyebrow),
.ai-tool-page .pn-hero p:not(.pn-eyebrow),
.ai-tool-page .page-hero p {
  max-width: 720px !important;
  margin: 0 !important;
  color: rgba(245,240,232,.72) !important;
  font-size: clamp(15px, 2vw, 18px) !important;
  line-height: 1.65 !important;
}

.ai-tool-page .main-content,
.ai-tool-page main,
.ai-tool-page .department-main,
.ai-tool-page .pn-layout,
.ai-tool-page .member-main {
  width: min(1120px, calc(100% - 40px)) !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
  padding-block: clamp(38px, 6vw, 72px) !important;
}

.ai-tool-page form.ai-tool-form {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(22px, 4vw, 42px) !important;
  border: 1px solid var(--rule) !important;
  border-top: 6px solid var(--tool-accent) !important;
  border-radius: 0 !important;
  background: var(--white) !important;
  box-shadow: 12px 12px 0 var(--cream) !important;
}

.ai-tool-page form.ai-tool-form::before {
  content: "Guided input";
  display: block;
  margin-bottom: 24px;
  color: var(--tool-accent);
  font: 700 10px/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.ai-tool-page form h2,
.ai-tool-page form h3,
.ai-tool-page .form-section h2,
.ai-tool-page .question h3 {
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  letter-spacing: -.01em !important;
}

.ai-tool-page label,
.ai-tool-page legend {
  color: var(--ink);
}

.ai-tool-page input:not([type="checkbox"]):not([type="radio"]),
.ai-tool-page textarea,
.ai-tool-page select {
  width: 100%;
  border: 1px solid #a9a196 !important;
  border-radius: 2px !important;
  background: #fffefb !important;
  color: var(--ink) !important;
  font: 400 15px/1.55 var(--font-body) !important;
  box-shadow: none !important;
}

.ai-tool-page input:focus,
.ai-tool-page textarea:focus,
.ai-tool-page select:focus {
  outline: 3px solid color-mix(in srgb, var(--tool-accent) 22%, transparent) !important;
  border-color: var(--tool-accent) !important;
  box-shadow: none !important;
}

.ai-tool-page button[type="submit"],
.ai-tool-page .submit-btn,
.ai-tool-page .btn-primary,
.ai-tool-page .documentation-primary,
.ai-tool-page #btnFinish,
.ai-tool-page #generate-btn,
.ai-tool-page #generateBtn {
  min-height: 48px;
  border: 0 !important;
  border-radius: 2px !important;
  background: var(--tool-accent) !important;
  background-image: none !important;
  color: #fff !important;
  font: 700 11px/1 var(--font-mono) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transform: none !important;
}

.ai-tool-page button[type="submit"]:hover,
.ai-tool-page .submit-btn:hover,
.ai-tool-page .btn-primary:hover,
.ai-tool-page #btnFinish:hover,
.ai-tool-page #generate-btn:hover,
.ai-tool-page #generateBtn:hover { filter: brightness(.86); transform: none !important; }

.ai-tool-page .question,
.ai-tool-page .question-container,
.ai-tool-page .form-section,
.ai-tool-page .assessment-card,
.ai-tool-page .choice-card,
.ai-tool-page details,
.ai-tool-page .privacy-note,
.ai-tool-page .pn-privacy,
.ai-tool-page .documentation-confirm {
  border-radius: 2px !important;
  box-shadow: none !important;
}

.ai-tool-page .form-section,
.ai-tool-page .assessment-card {
  border: 1px solid var(--rule) !important;
  border-left: 4px solid var(--tool-accent) !important;
  background: var(--paper) !important;
}

.ai-tool-page .assessment-privacy-preview,
.ai-tool-page .privacy-scan,
.ai-tool-page [data-privacy-identifiers],
.ai-tool-page [name="additionalIdentifiers"] { display: none !important; }

.ai-tool-page .ai-tool-privacy-note {
  max-width: 900px;
  margin: 0 auto 18px;
  padding: 15px 18px;
  border-left: 5px solid var(--gold);
  background: #fff8e8;
  color: #4b4334;
  font-size: 13px;
  line-height: 1.6;
}

.ai-tool-page .ai-tool-privacy-note strong { color: var(--ink); }

.ai-tool-page [id*="result" i]:not([role="status"]),
.ai-tool-page [id*="output" i] {
  scroll-margin-top: 100px;
}

.ai-tool-page .privacy-receipt,
.ai-tool-page .documentation-result,
.ai-tool-page .pn-document,
.ai-tool-page .result-card,
.ai-tool-page .results-container {
  border-radius: 0 !important;
  border-color: var(--rule) !important;
  background: #fffefb !important;
  box-shadow: 12px 12px 0 var(--cream) !important;
}

.ai-tool-page .chat-container { border:1px solid var(--rule) !important; border-radius:0 !important; box-shadow:12px 12px 0 var(--cream) !important; }
.ai-tool-page .message-container { background:#fffefb !important; }

@media (max-width: 700px) {
  body.ai-tool-page::after { display: none; }
  .ai-tool-page .main-content,
  .ai-tool-page main,
  .ai-tool-page .department-main,
  .ai-tool-page .pn-layout,
  .ai-tool-page .member-main { width: min(100% - 28px, 1120px) !important; }
  .ai-tool-page form.ai-tool-form { padding: 22px 18px !important; box-shadow: 7px 7px 0 var(--cream) !important; }
  /* DaisyUI also owns the generic .hero-content class. Its flex rule made the
     kicker, title, and description overflow as three columns on phones. */
  .ai-tool-page .hero-content {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
  }
  .ai-tool-page .survey-hero,
  .ai-tool-page .hero-bg,
  .ai-tool-page .generator-hero,
  .ai-tool-page .member-hero,
  .ai-tool-page .department-hero,
  .ai-tool-page .pn-hero,
  .ai-tool-page .page-hero { padding-inline: 20px !important; }
  .ai-tool-page .survey-hero h1,
  .ai-tool-page .hero-bg h1,
  .ai-tool-page .generator-hero h1,
  .ai-tool-page .member-hero h1,
  .ai-tool-page .department-hero h1,
  .ai-tool-page .pn-hero h1 { font-size: 40px !important; }
}