/* Planner presentation. Type and identity follow the public WOWNEX theme. */
.wxep {
  --wxep-navy: var(--wow-navy, #092348);
  --wxep-ink: var(--wow-ink, #12233b);
  --wxep-muted: var(--wow-muted, #596677);
  --wxep-gold: #b49251;
  --wxep-rule: #d8e2ec;
  --wxep-soft: #f4f7fa;
  --wxep-warm: #f8f3e7;
  max-width: 1140px;
  margin: 0 auto;
  padding: 28px 24px 56px;
  color: var(--wxep-ink);
  font-family: inherit;
  font-size: var(--wow-text-body);
  line-height: 1.55;
}
.wxep *, .wxep *::before, .wxep *::after { box-sizing: border-box; }
.wxep [hidden] { display: none !important; }
.wxep :is(button, a, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--wxep-gold);
  outline-offset: 3px;
}
.wxep-hero {
  padding: 25px 28px 27px;
  margin-bottom: 18px;
  border-radius: 14px;
  border-top: 3px solid var(--wxep-gold);
  background: var(--wxep-navy);
  color: white;
}
.wxep .wxep-kicker {
  margin: 0 0 6px;
  color: var(--wow-gold-text, #816022);
  font-size: var(--wow-text-meta);
  font-weight: 650;
  letter-spacing: .055em;
  line-height: 1.35;
}
.wxep-hero .wxep-kicker { color: var(--wow-gold-light, #dfc48e); }
.wxep-hero h1 {
  margin: 0 0 8px;
  max-width: 29ch;
  color: inherit;
  font-size: var(--wow-title-page);
  font-weight: 650;
  letter-spacing: normal;
  line-height: 1.2;
}
.wxep-hero > p:last-child { max-width: 68ch; margin: 0; color: var(--wow-on-dark, #dce3ee); }
.wxep-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(270px, 1fr);
  align-items: start;
  gap: 18px;
}
.wxep-panel {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--wxep-rule);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 12px #09234807;
}
.wxep-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 0 0 20px; }
.wxep-progress button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-height: 46px;
  min-width: 0;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--wxep-soft);
  color: var(--wxep-muted);
  font: inherit;
  font-size: var(--wow-text-meta);
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
.wxep-progress button[aria-current="step"] { border-color: var(--wxep-gold); background: var(--wxep-warm); color: var(--wxep-navy); }
.wxep-progress button:is(:disabled,[aria-disabled="true"]) { cursor: default; }
.wxep-progress button:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--wxep-gold); }
.wxep-step-number {
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  min-height: 22px;
  border-radius: 4px;
  background: #fff;
  color: var(--wxep-navy);
  font-size: var(--wow-text-meta);
  font-variant-numeric: tabular-nums;
}
.wxep form { margin: 0; }
.wxep form > fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.wxep :is(legend, .wxep-result h2) {
  display: block;
  max-width: 100%;
  margin: 0 0 6px;
  padding: 0;
  color: var(--wxep-navy);
  font-size: var(--wow-title-section);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: normal;
  scroll-margin-block-start: 16px;
}
.wxep-intro { margin: 0 0 16px; color: var(--wxep-muted); }
.wxep-fields, .wxep-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.wxep-field { min-width: 0; }
.wxep-fields > .wxep-full { grid-column: 1 / -1; }
.wxep label { display: block; margin: 0 0 5px; color: var(--wxep-navy); font-size: var(--wow-text-control); font-weight: 600; line-height: 1.4; }
.wxep :is(input:not([type="checkbox"]), select) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #b9c8d9;
  border-radius: 8px;
  background: #fff;
  color: var(--wxep-ink);
  font: inherit;
  font-size: var(--app-type-input, var(--wow-text-body));
  line-height: 1.4;
}
.wxep input[type="number"] { font-variant-numeric: tabular-nums; }
.wxep .wxep-help { margin: 6px 0 0; padding: 0; color: var(--wxep-muted); font-size: var(--wow-text-meta); line-height: 1.5; }
.wxep-services { margin: 19px 0 0; padding-top: 13px; border-top: 1px solid var(--wxep-rule); }
.wxep-services h2 { margin: 0; color: var(--wxep-navy); font-size: var(--app-type-section, var(--wow-text-lead)); line-height: 1.4; font-weight: 650; letter-spacing: normal; }
.wxep-service-modes, .wxep-secondary-fields { margin-top: 12px; }
.wxep :is(.wxep-fold, #wxg-roles > details) {
  min-width: 0;
  margin: 12px 0 0;
  padding: 0 12px;
  border: 1px solid var(--wxep-rule);
  border-radius: 8px;
  background: var(--wxep-soft);
}
.wxep :is(.wxep-fold, #wxg-roles > details)[open] { padding-bottom: 12px; }
.wxep details > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  min-height: 44px;
  padding: 8px 0;
  color: var(--wxep-navy);
  font-size: var(--wow-text-control);
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.wxep details > summary::-webkit-details-marker { display: none; }
.wxep details > summary::marker { content: ""; }
.wxep details > summary::after {
  content: "";
  display: block;
  flex: 0 0 8px;
  height: 8px;
  margin: -4px 2px 0 0;
  border: solid var(--wxep-muted);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.wxep details[open] > summary::after { margin-top: 3px; transform: rotate(225deg); }
.wxep .wxep-choice-grid { gap: 5px 10px; }
.wxep .wxep-choice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 8px 5px;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
}
.wxep .wxep-choice:hover { background: #fff; }
.wxep .wxep-choice input {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--wxep-navy);
}
.wxep-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.wxep .wxep-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 8px 13px;
  border: 1px solid #b9c8d9;
  border-radius: 8px;
  background: #fff;
  color: var(--wxep-navy);
  font: inherit;
  font-size: var(--wow-text-control);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  cursor: pointer;
}
.wxep .wxep-primary { border-color: var(--wxep-navy); background: var(--wxep-navy); color: white; }
.wxep .wxep-quiet { border-color: transparent; background: transparent; }
.wxep .wxep-button:hover:not(:disabled) { border-color: var(--wxep-gold); }
.wxep .wxep-button:disabled { opacity: .58; cursor: default; }

.wxep-result { border-top: 3px solid var(--wxep-gold); }
.wxep :is(#wxg-duration, #wxep-summary, #wxg-result-note):empty { display: none; }
.wxep-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 13px 0 11px; }
.wxep-metric {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid var(--wxep-rule);
  border-radius: 8px;
  background: var(--wxep-soft);
  color: var(--wxep-muted);
  font-size: var(--wow-text-meta);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.wxep-metric-featured { border-color: #e4d5b5; background: var(--wxep-warm); color: var(--wxep-navy); }
.wxep-metric strong { color: var(--wxep-navy); font-size: var(--wow-text-heading); font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; }
.wxep-summary { min-width: 0; margin: 13px 0 0; padding-top: 10px; border-top: 1px solid var(--wxep-rule); color: var(--wxep-muted); font-size: var(--wow-text-meta); overflow-wrap: anywhere; }
.wxep-summary :is(p, dl) { margin: 0 0 6px; padding: 0; color: var(--wxep-muted); font-size: var(--wow-text-meta); line-height: 1.5; }
.wxep-summary dt { color: var(--wxep-navy); font-weight: 600; }
.wxep-summary dd { margin: 0 0 5px; }
.wxep-result-note { margin: 12px 0 0; color: var(--wxep-muted); }
.wxep-result-actions > .wxep-primary { width: 100%; }
.wxep-plan-tools .wxep-actions { margin-top: 4px; }
.wxep-plan-tools .wxep-help { margin-top: 9px; }
.wxep .wxep-result-footnote { margin-top: 14px; }
.wxep-feedback {
  margin: 13px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--wxep-gold);
  border-radius: 0 7px 7px 0;
  background: var(--wxep-warm);
  color: var(--wxep-navy);
  font-size: var(--wow-text-meta);
  line-height: 1.5;
}
.wxep-feedback[role="alert"], .wxep-feedback[data-error="true"] { border-color: #9e4736; background: #fbf1ed; color: #71382d; }

.wxep-roles .wxep-area-head { display: grid; grid-template-columns: minmax(0, 1fr) auto 10px; gap: 7px; }
.wxep-area-name { overflow-wrap: anywhere; }
.wxep-area-count {
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--wxep-warm);
  color: var(--wxep-navy);
  font-size: var(--wow-text-meta);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}
.wxep-area-count[data-covered="true"] { background: #e8f0ed; color: #244e42; }
.wxep-area-rows { padding: 0 10px; border: 1px solid var(--wxep-rule); border-radius: 8px; background: #fff; }
.wxep-role-row { min-width: 0; padding: 12px 0; }
.wxep-role-row + .wxep-role-row { border-top: 1px solid var(--wxep-rule); }
.wxep-role-row h4 { margin: 0 0 3px; color: var(--wxep-navy); font-size: var(--app-type-card, var(--wow-text-lead)); font-weight: 650; line-height: 1.4; }
.wxep .wxep-role-reason { margin: 0 0 9px; color: var(--wxep-muted); font-size: var(--wow-text-meta); line-height: 1.45; }
.wxep-role-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
.wxep-role-controls > * { min-width: 0; }
.wxep .wxep-role-controls label, .wxep-gap { display: grid; gap: 4px; margin: 0; color: var(--wxep-navy); font-size: var(--wow-text-meta); line-height: 1.35; font-weight: 500; }
.wxep-gap output { display: grid; place-items: center; min-height: 44px; border-radius: 8px; background: var(--wxep-warm); color: var(--wxep-navy); font-size: var(--wow-text-control); font-weight: 650; }
@media(min-width:901px){
  .wxep-layout:has([data-wxep-step="coverage"]:not([hidden])) > .wxep-result { position:sticky; top:18px; }
}
.wxep-gap output[data-covered="true"] { background: #e8f0ed; color: #244e42; }
.wxep-role-reset {
  min-height: 44px;
  margin: 4px 0 0;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: var(--wxep-navy);
  font: inherit;
  font-size: var(--wow-text-meta);
  text-decoration: underline;
  cursor: pointer;
}
.wxep-add-role { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }

@media (max-width: 860px) {
  .wxep-layout { grid-template-columns: 1fr; }
  .wxep-result { scroll-margin-block-start: 16px; }
}
@media (max-width: 520px) {
  .wxep { padding: 16px 12px 38px; }
  .wxep-hero { padding: 18px 15px 20px; margin-bottom: 12px; }
  .wxep-layout { gap: 12px; }
  .wxep-panel { padding: 14px 12px; }
  .wxep-progress { gap: 4px; margin-bottom: 15px; }
  .wxep-progress button { gap: 4px; padding-inline: 5px; }
  .wxep-step-number { flex-basis: 17px; min-height: 19px; }
  .wxep-fields { gap: 10px; }
  .wxep-fields > .wxep-field:has(> select) { grid-column: 1 / -1; }
  .wxep-add-role { grid-template-columns: 1fr; }
  .wxep-add-role > button { justify-self: start; }
  .wxep .wxep-choice { padding-inline: 2px; }
}
@media (max-width: 365px) {
  .wxep { padding-inline: 6px; }
  .wxep-panel { padding-inline: 8px; }
  .wxep-fields, .wxep-choice-grid { grid-template-columns: 1fr; }
  .wxep-fields > .wxep-full { grid-column: auto; }
  .wxep-actions .wxep-primary { flex: 1; }
  .wxep-metric { padding-inline: 6px; }
}