/* Joer — "Iniciar projeto": questions on the left, the WhatsApp message building up in a panel on the right.
   Colors come from the theme pair (--text-primary on --surface-page), so every palette, dark mode and high contrast follow. */

.j-pj {
  /* Field and option lines: 3:1 or more against the page in every theme (eMAG 4.1) */
  --pj-line: color-mix(in srgb, var(--text-primary) 60%, transparent);
  display: grid;
  gap: clamp(var(--space-56), 6vw, var(--space-88));
}
@media (min-width: 1000px) {
  .j-pj { grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); align-items: start; }
  .j-pj__aside { position: sticky; top: calc(var(--header-offset) - var(--space-20)); }
}

.j-pj__fields { display: grid; gap: clamp(var(--space-40), 5vw, var(--space-72)); min-width: 0; }

/* ---------- Questions ---------- */
.j-pj-q {
  min-width: 0;
  margin: 0;
  padding: var(--space-24) 0 0;
  border: 0;
  border-top: var(--rule-strong) solid var(--border-strong);
}
.j-pj-q > * { clear: both; }
.j-pj-q > :not(.j-pj-q__legend) + :not(.j-pj-q__legend) { margin-top: var(--space-16); }
/* Floated, the legend leaves the fieldset border and lays out like a heading */
.j-pj-q__legend {
  float: left;
  width: 100%;
  display: flex;
  flex-direction: column; /* number on top, question below */
  align-items: flex-start;
  gap: var(--space-12);
  margin: 0 0 var(--space-20);
  padding: 0;
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.j-pj-q__num {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-accent);
}
.j-pj-q__num::before { content: "("; }
.j-pj-q__num::after { content: ")"; }
/* Required mark: an asterisk after the text; screen readers get the word instead */
.j-pj-req { margin-left: .08em; font-weight: 800; }
/* Card: the question on the profile's HUD plate (frame rules live with .j-profile .j-panel in site.css).
   The theme pair flips to the plate, so fields, tiles and errors repaint without their own rules. */
.j-pj-card {
  --text-primary: var(--text-on-panel);
  --surface-page: var(--surface-panel);
  --pj-line: color-mix(in srgb, var(--text-on-panel) 60%, transparent);
}
.j-pj-card .j-pj-q { padding-top: 0; border-top: 0; }
.j-pj-card .j-pj-q__legend { margin-bottom: var(--space-56); color: var(--text-display); }
.j-pj-card .j-pj-q__legend > .j-pj-q__num,
.j-pj-card .j-pj-req { color: var(--text-on-panel); }
.j-pj-card .j-pj-input:focus-visible { border-color: var(--accent); }
.j-pj-card .j-pj-row { grid-template-columns: minmax(0, 1fr); }
/* A hint stays with its title; the big gap moves below it */
.j-pj-card .j-pj-q__legend:has(+ .j-pj-hint) { margin-bottom: var(--space-12); }
.j-pj-card .j-pj-q > .j-pj-q__legend + .j-pj-hint + * { margin-top: var(--space-56); }
/* Graphite border for fields and tiles on the plate; hover, focus and checked bring the full line back */
.j-pj-card { --pj-graphite: color-mix(in srgb, var(--paper) 20%, var(--ink)); }
.j-pj-card .j-pj-input:not(:hover, :focus-visible, [aria-invalid="true"]),
.j-pj-card .j-pj-q:not(.has-error) .j-pj-opt:not(:hover, :has(input:checked)) { border-color: var(--pj-graphite); }

.j-pj-hint { max-width: 60ch; font-size: 15px; line-height: 1.5; font-weight: 500; }

.j-pj-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-20); }
.j-pj-field { display: grid; gap: var(--space-6); align-content: start; }
.j-pj-reveal[hidden] { display: none; } /* display: grid would beat the hidden attribute */
.j-pj-label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); padding: 0; font-size: 15px; font-weight: 700; }

/* ---------- Text fields ---------- */
.j-pj-input {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: var(--space-14) var(--space-16);
  border: var(--rule-strong) solid var(--pj-line);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: 500 18px/1.4 var(--font-body);
  transition: border-color .25s ease;
}
.j-pj-input--area { min-height: 7.2em; resize: vertical; }
.j-pj-input:hover { border-color: var(--text-primary); }
/* Focus repaints the field's own border instead of drawing a second ring around it */
.j-pj-input:focus-visible { border-color: var(--text-primary); outline: 0; }
.j-pj-input[aria-invalid="true"] { border-style: dashed; border-color: var(--text-primary); }

/* ---------- Options: radios and checkboxes as tiles ---------- */
.j-pj-opts { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.j-pj-opt {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  min-height: 48px;
  padding: var(--space-12) var(--space-18) var(--space-12) var(--space-14);
  border: var(--rule-strong) solid var(--pj-line);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
/* The real input covers the tile: clicks, keyboard and screen readers all reach it */
.j-pj-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.j-pj-opt span { display: flex; align-items: center; gap: var(--space-12); }
/* Marker: a box that gets a glyph when checked, so the state never rests on color alone (eMAG 4.2) */
.j-pj-opt span::before {
  content: "";
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: var(--rule-strong) solid currentColor;
  border-radius: 50%;
  font: 700 11px/1 var(--font-mono);
}
.j-pj-opt--check span::before { border-radius: 0; }
.j-pj-opt input:checked + span::before { content: "●"; }
.j-pj-opt--check input:checked + span::before { content: "✓"; font-size: 13px; }
.j-pj-opt:hover { border-color: var(--text-primary); }
.j-pj-opt:has(input:checked) { background: var(--text-primary); border-color: var(--text-primary); color: var(--surface-page); }
.j-pj-opt:has(input:focus-visible) { outline: var(--rule-strong) solid var(--text-primary); outline-offset: 3px; }
.j-pj-q.has-error .j-pj-opt:not(:has(input:checked)) { border-style: dashed; border-color: var(--text-primary); }

/* ---------- Errors (eMAG 6.6): inline text under the question and a summary that takes focus ---------- */
.j-pj-error {
  justify-self: start;
  width: fit-content;
  padding: var(--space-6) var(--space-12);
  background: var(--text-primary);
  color: var(--surface-page);
  font-size: 15px;
  font-weight: 700;
}
.j-pj-error::before { content: "(!) "; font-family: var(--font-mono); }
.j-pj-errors {
  padding: var(--space-20) var(--space-24);
  background: var(--text-primary);
  color: var(--surface-page);
}
.j-pj-errors__title { margin: 0; font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -.02em; }
.j-pj-errors__list { margin: var(--space-12) 0 0; padding-left: var(--space-20); font-size: 16px; font-weight: 600; line-height: 1.6; }
.j-pj-errors__list a { text-decoration: underline; text-underline-offset: 3px; }
.j-pj-errors__list a:hover { color: inherit; text-decoration-thickness: 2px; }
.j-pj-errors__list a:focus-visible { outline-color: var(--surface-page); }

/* ---------- Message panel ---------- */
.j-pj-preview { grid-template-columns: minmax(0, 1fr); gap: var(--space-20); padding: clamp(var(--space-24), 3vw, var(--space-40)); }
.j-pj-preview__meta { align-items: baseline; flex-wrap: wrap; }
.j-pj-preview__title { margin: 0; font: inherit; }
.j-pj-msg {
  max-height: min(44vh, 420px);
  overflow: auto;
  padding: var(--space-18);
  border-left: var(--rule-strong) solid var(--accent);
  background: color-mix(in srgb, var(--text-on-panel) 6%, transparent);
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.j-pj-msg:focus-visible { outline: var(--rule-strong) solid var(--accent); outline-offset: 3px; }
.j-pj-msg p + p { margin-top: var(--space-6); }
.j-pj-msg p:first-child { margin-bottom: var(--space-14); }
.j-pj-msg b { font-weight: 800; }
.j-pj-msg__empty { font-style: italic; }
/* Accent slab on the dark plate, whatever the theme */
.j-pj-send {
  width: 100%;
  border: 0;
  background: var(--accent);
  color: var(--ink-deep);
  cursor: pointer;
}
.j-pj-send:hover { background: var(--paper); }
.j-pj-send:focus-visible { outline-color: var(--accent); }
.j-pj-done { font-size: 15px; line-height: 1.5; font-weight: 600; }
.j-pj-done:empty { display: none; }
.j-pj-privacy { font-size: 13px; line-height: 1.5; }
.j-pj-noscript { margin-top: var(--space-24); }

/* ---------- High contrast ---------- */
.is-high-contrast .j-pj-opt:has(input:checked) span { text-decoration: underline 2px; text-underline-offset: 4px; }
.is-high-contrast :is(.j-pj-error, .j-pj-errors) { border: 2px solid #fff; }