:root {
  --help-max: 1420px;
  --help-shadow: 0 2px 8px rgba(13, 43, 79, .055);
}

.help-body { background: var(--app-bg); }

.help-utility {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 64px;
  gap: 18px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--white);
}

.help-brand {
  color: var(--navy);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .015em;
  text-decoration: none;
}

.help-context {
  padding-left: 18px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.help-actions { display: flex; gap: 8px; }

.help-gates {
  position: sticky;
  top: 64px;
  z-index: 25;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  max-width: var(--help-max);
  margin: 0 auto;
  padding: 12px 24px 0;
  background: var(--white);
}

.help-gates::before {
  position: fixed;
  top: 64px;
  right: 0;
  left: 0;
  z-index: -1;
  height: 56px;
  background: var(--white);
  content: "";
}

.help-gates a {
  display: grid;
  min-height: 44px;
  place-items: center;
  border-right: 1px solid rgba(255, 255, 255, .72);
  padding: 8px;
  background: var(--gate);
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .015em;
  text-decoration: none;
}

.help-gates a:hover,
.help-gates a:focus-visible { filter: brightness(.92); }

.help-main {
  max-width: var(--help-max);
  margin: 0 auto;
  padding: 30px 24px 64px;
}

.help-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 410px);
  align-items: start;
  gap: 30px;
  margin-bottom: 30px;
  padding: 28px 24px;
  border: 1px solid #e1e6ec;
  background: var(--white);
  box-shadow: var(--help-shadow);
}

.help-heading h1 {
  margin: 0 0 12px;
  color: var(--review);
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.06;
  letter-spacing: -.025em;
}

.help-heading p {
  max-width: 850px;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.help-principle {
  padding: 18px 20px;
  border-left: 6px solid var(--raspberry);
  background: #f8edf2;
}

.help-principle strong {
  display: block;
  margin-bottom: 7px;
  color: var(--raspberry);
  font-size: 13px;
  text-transform: uppercase;
}

.help-principle span { color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.5; }

.workflow-map {
  position: relative;
  padding: 28px 24px 34px 112px;
  border: 1px solid #e1e6ec;
  background: var(--white);
  box-shadow: var(--help-shadow);
}

.workflow-map > h2,
.help-section > h2 {
  margin: 0 0 24px;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.2;
}

.flow-gate {
  position: relative;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) minmax(270px, 340px);
  min-height: 220px;
  border: 1px solid var(--line);
  background: var(--white);
  scroll-margin-top: 138px;
}

.gate-lozenge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
  background: var(--gate);
  color: var(--white);
}

.gate-lozenge span { margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.gate-lozenge strong { font-size: 21px; line-height: 1.15; }

.gate-activity { padding: 22px 24px; }
.gate-activity h3 { margin: 0 0 10px; color: var(--gate); font-size: 20px; }
.gate-activity ul { margin: 0; padding-left: 20px; }
.gate-activity li { margin: 0 0 8px; color: var(--ink); font-size: 14px; line-height: 1.45; }
.gate-output { margin: 14px 0 0; color: #34465a; font-size: 13px; line-height: 1.45; }

.signoff-box {
  align-self: stretch;
  margin: 14px;
  padding: 18px;
  border: 2px solid var(--gate);
  background: color-mix(in srgb, var(--gate) 6%, white);
}

.signoff-box span {
  display: block;
  margin-bottom: 8px;
  color: var(--gate);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.signoff-box strong { display: block; color: var(--navy); font-size: 16px; line-height: 1.35; }
.signoff-box p { margin: 10px 0 0; color: #435267; font-size: 13px; line-height: 1.45; }
.signoff-critical { box-shadow: inset 5px 0 0 var(--gate); }

.flow-connector {
  position: relative;
  display: grid;
  height: 58px;
  place-items: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.flow-connector::before { width: 3px; height: 34px; background: var(--line); content: ""; }
.flow-connector::after {
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-top: 10px solid var(--line);
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  content: "";
}
.flow-connector span { position: absolute; left: calc(50% + 12px); top: 20px; }

.flow-finish {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border: 2px solid var(--success);
  background: #edf8f1;
  color: var(--success);
}

.flow-finish > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--success); color: #fff; font-weight: 900; }
.flow-finish strong { font-size: 16px; }
.flow-finish p { margin: 0; color: #34465a; font-size: 14px; }

.rework-route {
  position: absolute;
  top: 78px;
  bottom: 34px;
  left: 24px;
  width: 62px;
  border: 2px dashed #b62d3c;
  border-right: 0;
  color: #8d2330;
}

.rework-route::before,
.rework-route::after { position: absolute; left: -2px; width: 18px; height: 2px; background: #b62d3c; content: ""; }
.rework-route::before { top: -2px; }
.rework-route::after { bottom: -2px; }
.rework-route strong { position: absolute; top: 50%; left: -11px; width: 82px; transform: rotate(-90deg); background: #fff; font-size: 11px; text-align: center; }
.rework-route span { position: absolute; top: 12px; left: 8px; font-size: 10px; font-weight: 900; }
.rework-route p { display: none; }

.rework-summary {
  display: grid;
  grid-template-columns: minmax(210px, auto) 1fr;
  gap: 18px;
  margin-top: 18px;
  padding: 15px 18px;
  border: 2px dashed var(--danger);
  background: #fff6f6;
}
.rework-summary strong { color: var(--danger); font-size: 14px; }
.rework-summary p { margin: 0; color: #435267; font-size: 13px; line-height: 1.45; }

.help-section {
  margin-top: 26px;
  padding: 28px 24px;
  border: 1px solid #e1e6ec;
  background: var(--white);
  box-shadow: var(--help-shadow);
}

.control-list { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.control-list article { padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.control-list strong { display: block; margin-bottom: 7px; color: var(--review); font-size: 15px; }
.control-list p { margin: 0; color: #435267; font-size: 13px; line-height: 1.5; }

.help-table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.help-table { width: 100%; min-width: 800px; border-collapse: collapse; table-layout: fixed; }
.help-table th { padding: 12px; border-right: 1px solid rgba(255,255,255,.75); background: var(--review); color: #fff; font-size: 11px; text-align: left; text-transform: uppercase; }
.help-table td { padding: 12px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); color: var(--ink); font-size: 13px; line-height: 1.45; vertical-align: top; }
.help-table th:nth-child(1) { width: 15%; }
.help-table th:nth-child(2) { width: 24%; }
.help-table th:nth-child(3) { width: 23%; }
.help-table th:last-child,
.help-table td:last-child { border-right: 0; }
.role-note { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }

.help-footer {
  display: flex;
  justify-content: space-between;
  max-width: var(--help-max);
  margin: 0 auto;
  padding: 22px 24px 34px;
  color: var(--muted);
  font-size: 13px;
}
.help-footer a { color: var(--review); font-weight: 700; text-decoration: none; }

@media (max-width: 1050px) {
  .help-utility { grid-template-columns: 1fr auto; }
  .help-context { display: none; }
  .help-heading { grid-template-columns: 1fr; }
  .flow-gate { grid-template-columns: 170px minmax(0, 1fr); }
  .signoff-box { grid-column: 1 / -1; margin: 0 14px 14px; }
  .control-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .help-utility { position: static; grid-template-columns: 1fr; padding: 14px; }
  .help-brand { font-size: 18px; }
  .help-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .help-gates { position: static; grid-template-columns: repeat(2, 1fr); padding: 0 14px; }
  .help-gates::before { display: none; }
  .help-gates a { min-height: 42px; font-size: 10px; }
  .help-main { padding: 14px 10px 42px; }
  .help-heading { gap: 18px; padding: 22px 16px; }
  .help-heading h1 { font-size: 30px; }
  .help-heading p { font-size: 15px; }
  .workflow-map { padding: 22px 12px; }
  .workflow-map > h2,
  .help-section > h2 { font-size: 21px; }
  .flow-gate { display: block; }
  .gate-lozenge { min-height: 96px; padding: 18px; }
  .gate-activity { padding: 18px; }
  .signoff-box { margin: 0 12px 12px; }
  .rework-route { display: none; }
  .rework-summary { grid-template-columns: 1fr; gap: 6px; }
  .control-list { grid-template-columns: 1fr; }
  .help-section { padding: 22px 14px; }
  .help-table-wrap { border: 0; overflow: visible; }
  .help-table { display: block; min-width: 0; }
  .help-table thead { display: none; }
  .help-table tbody,
  .help-table tr,
  .help-table td { display: block; width: 100%; }
  .help-table tr { margin-bottom: 14px; border: 1px solid var(--line); }
  .help-table td { border-right: 0; }
  .help-table td::before { display: block; margin-bottom: 4px; color: var(--review); font-size: 10px; font-weight: 800; text-transform: uppercase; }
  .help-table td:nth-child(1)::before { content: "Gate"; }
  .help-table td:nth-child(2)::before { content: "Decision"; }
  .help-table td:nth-child(3)::before { content: "Typical accountable role"; }
  .help-table td:nth-child(4)::before { content: "Minimum evidence"; }
  .help-footer { display: grid; gap: 10px; padding: 18px 14px 30px; }
}

@page { size: A4 portrait; margin: 10mm 12mm; }

@media print {
  .help-body { background: #fff; }
  .help-utility,
  .help-gates,
  .help-footer { display: none; }
  .help-main { max-width: none; padding: 0; }
  .help-heading,
  .workflow-map,
  .help-section { box-shadow: none; }
  .help-heading { margin-bottom: 8mm; padding: 0 0 6mm; border: 0; border-bottom: .3mm solid var(--line); }
  .help-heading h1 { font-size: 24pt; }
  .help-heading p { font-size: 10pt; }
  .help-principle { font-size: 9pt; }
  .workflow-map { padding: 6mm 5mm 6mm 20mm; border: .3mm solid var(--line); }
  .flow-gate { grid-template-columns: 34mm 1fr 47mm; min-height: 0; break-inside: avoid; }
  .gate-lozenge { padding: 4mm; }
  .gate-lozenge strong { font-size: 10pt; }
  .gate-activity { padding: 4mm; }
  .gate-activity h3 { font-size: 10pt; }
  .gate-activity li,
  .gate-output,
  .signoff-box p { font-size: 7pt; }
  .signoff-box { grid-column: auto; margin: 2.5mm; padding: 3mm; }
  .signoff-box strong { font-size: 8pt; }
  .flow-connector { height: 10mm; }
  .rework-route { left: 5mm; width: 11mm; }
  .help-section { break-before: page; margin: 0; padding: 0; border: 0; }
  .control-list article { font-size: 8pt; }
  .help-table-wrap { overflow: visible; }
  .help-table { min-width: 0; }
  .help-table th { padding: 2mm; font-size: 6.5pt; overflow-wrap: anywhere; }
  .help-table td { padding: 2mm; font-size: 7pt; overflow-wrap: anywhere; }
}