@import url("style.css");

/* Shared inline-SVG presentation for the QDF specification diagrams. */
.diagram-wide { margin-bottom: 0; }
.uml-stack { display: grid; gap: 18px; }
.qdf-svg { display: block; width: 100%; height: auto; margin: 0; background: linear-gradient(145deg, #fff 0%, #f8fbff 100%); border: 1px solid #d9e2ee; border-radius: 12px; font-family: Arial, Helvetica, sans-serif; }
.qdf-svg text { fill: #162238; text-anchor: middle; dominant-baseline: middle; }
.qdf-svg .svg-title { font-size: 25px; font-weight: 700; fill: #143d7a; }
.qdf-svg .svg-subtitle, .qdf-svg .node-copy { font-size: 13px; fill: #526170; }
.qdf-svg .node-title { font-size: 18px; font-weight: 700; }
.qdf-svg .node-title.small { font-size: 14px; }
.qdf-svg .node-kicker { font-size: 10px; letter-spacing: 1.4px; font-weight: 700; fill: #526170; }
.qdf-svg .edge-label { font-size: 12px; fill: #526170; }
.qdf-svg .callout { font-size: 13px; fill: #526170; text-anchor: start; }
.qdf-svg .left { text-anchor: start; }
.qdf-svg .boundary { fill: #f8fbff; stroke: #1e4b90; stroke-width: 2; stroke-dasharray: 10 7; }
.qdf-svg .boundary-label { font-size: 16px; font-weight: 700; fill: #163c78; text-anchor: start; }
.qdf-svg .svg-node, .qdf-svg .external-box, .qdf-svg .state-node rect, .qdf-svg .class-box rect { stroke-width: 1.5; }
.qdf-svg .svg-node { fill: #fff; stroke: #7c8ca0; }
.qdf-svg .cmmn, .qdf-svg .cmmn-fill { fill: #effaf1; stroke: #32904a; }
.qdf-svg .bpmn, .qdf-svg .ingress, .qdf-svg .ingress-fill { fill: #edf5ff; stroke: #2471d4; }
.qdf-svg .dmn, .qdf-svg .dmn-fill { fill: #f7efff; stroke: #7a3eb5; }
.qdf-svg .contract, .qdf-svg .contract-fill { fill: #fff8e9; stroke: #d58a00; }
.qdf-svg .work, .qdf-svg .work-fill { fill: #f4f6f8; stroke: #647184; }
.qdf-svg .monitor, .qdf-svg .failure-box, .qdf-svg .failure-fill { fill: #fff1f1; stroke: #df3e3e; }
.qdf-svg .review-box, .qdf-svg .review-fill { fill: #fff8e8; stroke: #df9300; }
.qdf-svg .success-box, .qdf-svg .success-fill { fill: #eefaf0; stroke: #25873c; }
.qdf-svg .cancel-box { fill: #f4f5f7; stroke: #718096; }
.qdf-svg .flow-line, .qdf-svg .sequence-line, .qdf-svg .success-line { fill: none; stroke: #18212b; stroke-width: 2; }
.qdf-svg .decision-line { fill: none; stroke: #7a3eb5; stroke-width: 2; stroke-dasharray: 8 6; }
.qdf-svg .data-line { fill: none; stroke-width: 2; stroke-dasharray: 8 6; }
.qdf-svg .monitor-line { fill: none; stroke: #df3e3e; stroke-width: 2; stroke-dasharray: 7 5; }
.qdf-svg .failure-line { fill: none; stroke: #df3e3e; stroke-width: 2; }
.qdf-svg .review-line { fill: none; stroke: #df9300; stroke-width: 2; stroke-dasharray: 7 5; }
.qdf-svg .cancel-line, .qdf-svg .note-line { fill: none; stroke: #718096; stroke-width: 2; stroke-dasharray: 7 5; }
.qdf-svg .green, .qdf-svg .green-text { stroke: #32904a; fill: #32904a; }
.qdf-svg .blue { stroke: #2471d4; }
.qdf-svg .violet { fill: #7a3eb5; }.qdf-svg .red { fill: #df3e3e; }.qdf-svg .amber { fill: #bf7700; }
.qdf-svg .arrow-head path { fill: context-stroke; }
.qdf-svg .activity rect { fill: #edf5ff; stroke: #2471d4; stroke-width: 1.5; }.qdf-svg .activity text { font-size: 14px; font-weight: 700; }
.qdf-svg .gateway { fill: #f0faef; stroke: #32904a; stroke-width: 1.5; }.qdf-svg .start-event { fill: #fff; stroke: #25873c; stroke-width: 3; }.qdf-svg .start-event + text { font-weight: 700; }
.qdf-svg .lifeline { stroke: #8995a5; stroke-width: 1.25; stroke-dasharray: 6 5; }.qdf-svg .lifeline-head rect { fill: #fff; stroke: #647184; stroke-width: 1.2; }.qdf-svg .success-band { fill: #f3fbf4; stroke: #55a664; stroke-width: 1.2; }.qdf-svg .failure-band { fill: #fff5f5; stroke: #e15a5a; stroke-width: 1.2; }.qdf-svg .band-label { font-size: 13px; font-weight: 700; text-anchor: start; }.qdf-svg .seq-label text { text-anchor: start; font-size: 11px; }.qdf-svg .end-event circle { fill: #18212b; stroke: #fff; stroke-width: 6; }
.qdf-svg .class-box path { stroke: #647184; stroke-width: 1.2; }.qdf-svg .class-copy { font-size: 12px; text-anchor: start; }.qdf-svg .association path { fill: none; stroke: #18212b; stroke-width: 1.6; }.qdf-svg .uses { stroke-dasharray: 6 4 !important; }.qdf-svg .multiplicity text { font-size: 13px; text-anchor: start; }.qdf-svg .note-box { fill: #fff; stroke: #6f9bda; stroke-width: 1.4; stroke-dasharray: 6 4; }
@media (max-width: 560px) { .qdf-svg { border-radius: 8px; } .diagram figcaption { font-size: 1rem; } }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.hero-actions .button {
  display: inline-block;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: #143d7a;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}


.toc-list {
  columns: 2;
  gap: 2rem;
  padding-left: 1.25rem;
}

.toc-list li {
  break-inside: avoid;
  margin: 0.35rem 0;
}

@media (max-width: 700px) {
  .toc-list { columns: 1; }
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.value-grid article {
  padding: 1rem;
  border: 1px solid #d9e2ee;
  border-radius: 12px;
  background: #fff;
}

.value-grid h3 {
  margin-top: 0;
}