/* Engage presentation boundary.
   Owns the live engagement hero, posture summary, and context-entry form.
   Stakeholder ownership remains in stakeholders.css. */

.hero:has(.consultantHomeGrid) {
  min-height: auto;
  padding-top: clamp(14px, 2vw, 22px);
  padding-bottom: 16px;
}

.consultantHomeGrid {
  grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr);
  align-items: end;
  gap: 42px;
}

.consultantHomeGrid h1 {
  max-width: 720px;
  font-size: clamp(42px, 5vw, 68px);
  line-height: .96;
}

.consultantHomeGrid .heroLead {
  max-width: 680px;
  margin-bottom: 0;
}

.engagementHomePanel {
  padding: 22px;
  border: 1px solid #cfd3d6;
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--sm);
  color: var(--ink);
  backdrop-filter: none;
}

.homePanelHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.homePrimary span,
.homePrimary small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.homePrimary strong {
  display: block;
  margin: 4px 0 5px;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.15;
}

.heroVersion {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin: 3px 0 0;
  padding: 3px 7px;
  border: 1px solid #c7d1dc;
  border-radius: 999px;
  background: #f3f6f8;
  color: var(--entry-ink);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .05em;
  line-height: 1.2;
}

.engagementHeroVersion {
  flex: 0 0 auto;
  margin: 0;
  border-color: rgba(23, 61, 104, .26);
  background: rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.homeStatusGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 12px;
}

.homeStatusGrid div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fafaf8;
}

.homeStatusGrid dt {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.homeStatusGrid dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.homeStatusIcon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.homeStatusGrid div:last-child .homeStatusIcon {
  stroke: #b0792d;
}

.homePosture {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.homePostureTrack {
  position: relative;
  display: flex;
  height: 10px;
  margin-top: 16px;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f0f1ee;
}

.homePostureTrack > i {
  flex: 1 1 20%;
  min-width: 0;
  border-right: 1px solid rgba(255, 255, 255, .58);
}

.homePostureTrack > i:first-child {
  border-radius: 999px 0 0 999px;
}

.homePostureTrack > i:last-of-type {
  border-right: 0;
  border-radius: 0 999px 999px 0;
}

.homePostureTrack [data-score="0"],
.homePostureLegend [data-score="0"] i { background: var(--r0); }
.homePostureTrack [data-score="1"],
.homePostureLegend [data-score="1"] i { background: var(--r1); }
.homePostureTrack [data-score="2"],
.homePostureLegend [data-score="2"] i { background: var(--r2); }
.homePostureTrack [data-score="3"],
.homePostureLegend [data-score="3"] i { background: var(--r3); }
.homePostureTrack [data-score="4"],
.homePostureLegend [data-score="4"] i { background: var(--r4); }
.homePostureTrack [data-score="unscored"] { background: rgba(69, 111, 143, .2); }

.homePostureMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

.homePostureLabel {
  color: var(--navy);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.homePostureLegend {
  display: flex;
  justify-content: flex-end;
  gap: 11px;
  margin-top: 0;
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.homePostureLegend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.homePostureLegend i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
}

.homePostureLegend b {
  color: var(--ink);
}

.homePostureEmpty {
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
}

.homePostureAverage {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: clamp(9px, var(--average-position), calc(100% - 9px));
  width: 16px;
  height: 16px;
  border: 3px solid var(--navy);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(18, 50, 63, .28);
  transform: translate(-50%, -50%);
}

.homePostureAverage::after {
  content: attr(data-average);
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  padding: 1px 4px;
  border: 1px solid rgba(23, 61, 104, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: var(--navy);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  transform: translateX(-50%);
}

.setupGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.setupGrid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
}

.setupGrid input,
.setupGrid select,
.setupGrid textarea {
  padding: 10px 11px;
}

[data-national-security-theme-field][hidden] {
  display: none !important;
}

.agencyAlignmentFieldset {
  margin: 2px 0 0;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  padding: 14px;
  background: #f7f8f6;
}

.agencyAlignmentFieldset[hidden] { display: none !important; }
.agencyAlignmentFieldset legend { padding: 0 7px; color: var(--navy); font-size: 12px; font-weight: 800; }
.agencyAlignmentFieldset > p { margin: 0 0 12px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.agencyAlignmentGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

body[data-natsec-theme]:not([data-natsec-theme="none"]) .consultantHomeGrid {
  grid-template-areas: "copy panel";
  grid-template-columns: minmax(0, .76fr) minmax(520px, 1.24fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: 28px;
  row-gap: 0;
  width: 100%;
  max-width: none;
}

body[data-natsec-theme]:not([data-natsec-theme="none"]) .consultantHomeGrid > div:first-child {
  grid-area: copy;
  align-self: center;
}

body[data-natsec-theme]:not([data-natsec-theme="none"]) .consultantHomeGrid > div:first-child > :is(.eyebrow, h1, .heroLead) {
  color: #fff;
  text-shadow: 0 2px 3px rgba(13, 30, 43, .82), 0 8px 26px rgba(13, 30, 43, .56);
}

body[data-natsec-theme]:not([data-natsec-theme="none"]) .consultantHomeGrid h1 {
  font-size: clamp(40px, 4.6vw, 60px);
  line-height: .94;
}

body[data-natsec-theme]:not([data-natsec-theme="none"]) .consultantHomeGrid .heroLead {
  max-width: 46ch;
  margin-top: 8px;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.18;
}

body[data-natsec-theme]:not([data-natsec-theme="none"]) .engagementHomePanel {
  grid-area: panel;
  z-index: 2;
  margin: 0;
  padding: 12px 14px;
  border-color: rgba(255, 255, 255, .46);
  border-left-color: var(--blue);
  background: rgba(255, 255, 255, .63);
  box-shadow: 0 12px 30px rgba(22, 56, 77, .10);
  -webkit-backdrop-filter: blur(2px) saturate(1.04);
  backdrop-filter: blur(2px) saturate(1.04);
}

body[data-natsec-theme]:not([data-natsec-theme="none"]) .engagementHomePanel .homePrimary strong {
  margin: 2px 0 3px;
  font-size: 19px;
}

body[data-natsec-theme]:not([data-natsec-theme="none"]) .engagementHomePanel .homeStatusGrid {
  gap: 6px;
  margin: 8px 0 6px;
}

body[data-natsec-theme]:not([data-natsec-theme="none"]) .engagementHomePanel .homeStatusGrid div {
  padding: 6px 8px;
  border-color: rgba(255, 255, 255, .44);
  background: rgba(255, 255, 255, .24);
}

body[data-natsec-theme]:not([data-natsec-theme="none"]) .engagementHomePanel .homeStatusGrid dd {
  margin-top: 2px;
  font-size: 11px;
}

body[data-natsec-theme]:not([data-natsec-theme="none"]) .engagementHomePanel .homePosture {
  margin: 6px 0;
  padding-top: 7px;
}

body[data-natsec-theme]:not([data-natsec-theme="none"]) .engagementHomePanel .homePostureTrack {
  height: 8px;
  background: rgba(255, 255, 255, .24);
}

@media (min-width: 1100px) {
  body[data-natsec-theme]:not([data-natsec-theme="none"]) .consultantHomeGrid {
    grid-template-columns: minmax(0, 1fr) minmax(590px, .98fr);
  }

  body[data-natsec-theme]:not([data-natsec-theme="none"]) .engagementHomePanel .homeStatusGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 761px) and (max-width: 1099px) {
  body[data-natsec-theme]:not([data-natsec-theme="none"]) .engagementHomePanel {
    padding: 9px 12px;
  }

  body[data-natsec-theme]:not([data-natsec-theme="none"]) .engagementHomePanel .homeStatusGrid {
    gap: 4px;
    margin: 5px 0 3px;
  }

  body[data-natsec-theme]:not([data-natsec-theme="none"]) .engagementHomePanel .homeStatusGrid div {
    padding: 5px 7px;
  }

  body[data-natsec-theme]:not([data-natsec-theme="none"]) .engagementHomePanel .homePosture {
    margin: 3px 0 0;
    padding-top: 5px;
  }

  body[data-natsec-theme]:not([data-natsec-theme="none"]) .engagementHomePanel .homePostureTrack {
    margin-top: 14px;
  }
}

@media (max-width: 900px) {
  .consultantHomeGrid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  body[data-natsec-theme]:not([data-natsec-theme="none"]) .consultantHomeGrid {
    grid-template-areas:
      "copy"
      "panel";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 11px;
    width: 100%;
  }

  body[data-natsec-theme]:not([data-natsec-theme="none"]) .engagementHomePanel {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }
}

@media (max-width: 760px) {
  .hero:has(.consultantHomeGrid) {
    padding-bottom: 14px;
  }
}

@media (max-width: 680px) {
  .setupGrid,
  .agencyAlignmentGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .homeStatusGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .homePostureLegend {
    flex-wrap: wrap;
  }
}