/*
 * V3 editorial polish
 * A restrained print-first type scale for the 35-page product handbook.
 * Keep the existing content, layouts, and DL AI brand palette intact.
 */
:root {
  --muted: #5f7482;
  --line: #d5e0e5;
  --teal: #087a7b;
}

body {
  font-variant-numeric: tabular-nums;
}

/* Page-level hierarchy: crisp section labels, calm titles, and readable folios. */
.page:not(.cover):not(#back-cover) .eyebrow {
  font-size: 10.5px;
  line-height: 1.35;
}

.page:not(.cover):not(#back-cover) .page-title {
  line-height: 1.22;
  letter-spacing: 0;
}

.page:not(.cover):not(#back-cover) .section-heading {
  font-size: 15px;
  line-height: 1.35;
}

.page:not(.dark) .page-footer {
  color: var(--muted);
}

.page.dark .page-footer {
  color: #9eb8c1;
}

/* Card headings use one consistent weight and size across all page families. */
.page:not(.cover):not(#back-cover) .panel h3,
.page:not(.cover):not(#back-cover) .feature h3,
.page:not(.cover):not(#back-cover) .ai-card h3,
.page:not(.cover):not(#back-cover) .industry-card h3,
.page:not(.cover):not(#back-cover) .offer h3 {
  font-size: 14px;
  line-height: 1.35;
}

.page:not(.cover):not(#back-cover) .timeline-step h3 {
  font-size: 12px;
  line-height: 1.3;
}

.page:not(.cover):not(#back-cover) .case-evidence-head strong,
.page:not(.cover):not(#back-cover) .proof-card b,
.page:not(.cover):not(#back-cover) .case-evidence-grid strong {
  font-size: 12px;
  line-height: 1.35;
}

/* Supporting labels and captions stay secondary, but no longer fall to 7–8px. */
.page:not(.cover):not(#back-cover) .label,
.page:not(.cover):not(#back-cover) .chip,
.page:not(.cover):not(#back-cover) .metric-name,
.page:not(.cover):not(#back-cover) .metric-foot,
.page:not(.cover):not(#back-cover) .case-evidence-grid label,
.page:not(.cover):not(#back-cover) .audit-rail label,
.page:not(.cover):not(#back-cover) .delivery-proof-grid label,
.page:not(.cover):not(#back-cover) .industry-closeout small {
  font-size: 10px;
  line-height: 1.35;
}

.page:not(.cover):not(#back-cover) .case-evidence-head span,
.page:not(.cover):not(#back-cover) .industry-card h3 span {
  font-size: 9.5px;
  line-height: 1.4;
}

.page:not(.cover):not(#back-cover) .case-evidence-grid p,
.page:not(.cover):not(#back-cover) .audit-rail p,
.page:not(.cover):not(#back-cover) .proof-card p,
.page:not(.cover):not(#back-cover) .delivery-proof-grid p,
.page:not(.cover):not(#back-cover) .timeline-step p,
.page:not(.cover):not(#back-cover) .rule small,
.page:not(.cover):not(#back-cover) .pain small {
  line-height: 1.5;
}

/* More legible process diagrams, decision gates, and structured data. */
.page:not(.cover):not(#back-cover) .flow-node small,
.page:not(.cover):not(#back-cover) .lane-step,
.page:not(.cover):not(#back-cover) .lane-name,
.page:not(.cover):not(#back-cover) .decision-label,
.page:not(.cover):not(#back-cover) .decision-path b,
.page:not(.cover):not(#back-cover) .decision-path small,
.page:not(.cover):not(#back-cover) .trace-node,
.page:not(.cover):not(#back-cover) .object-chain .node,
.page:not(.cover):not(#back-cover) .process-band div,
.page:not(.cover):not(#back-cover) .evidence-board > div {
  font-size: 9.5px;
  line-height: 1.4;
}

.page:not(.cover):not(#back-cover) .decision-path b,
.page:not(.cover):not(#back-cover) .decision-label {
  font-size: 10.5px;
}

.page:not(.cover):not(#back-cover) .data-table,
.page:not(.cover):not(#back-cover) .proto-table {
  font-size: 10px;
  line-height: 1.4;
}

.page:not(.cover):not(#back-cover) .data-table th,
.page:not(.cover):not(#back-cover) .proto-table th,
.page:not(.cover):not(#back-cover) .ui-table th {
  color: #5f7482;
  font-size: 9.5px;
}

.page:not(.cover):not(#back-cover) .proto-field label {
  color: #5f7482;
  font-size: 9px;
  line-height: 1.35;
}

.page:not(.cover):not(#back-cover) .proto-field b {
  font-size: 11px;
  line-height: 1.35;
}

.page:not(.cover):not(#back-cover) .status {
  font-size: 9px;
  line-height: 1.3;
}

/* In the embedded MES screens, retain a dashboard hierarchy without hairline
   labels. Tabular figures keep KPI and cost values aligned. */
.page:not(.cover):not(#back-cover) .kpi small,
.page:not(.cover):not(#back-cover) .kpi .up,
.page:not(.cover):not(#back-cover) .app-user,
.page:not(.cover):not(#back-cover) .app-signal b,
.page:not(.cover):not(#back-cover) .app-signal small,
.page:not(.cover):not(#back-cover) .app-event-strip b,
.page:not(.cover):not(#back-cover) .app-event-strip small {
  font-size: 9px;
  line-height: 1.3;
}

.page:not(.cover):not(#back-cover) .app-signal strong,
.page:not(.cover):not(#back-cover) .app-event-strip strong {
  font-size: 10px;
  line-height: 1.35;
}

.page:not(.cover):not(#back-cover) .ui-table {
  font-size: 9.5px;
  line-height: 1.35;
}

.page:not(.cover):not(#back-cover) .input-line,
.page:not(.cover):not(#back-cover) .action,
.page:not(.cover):not(#back-cover) .pda-top,
.page:not(.cover):not(#back-cover) .scan,
.page:not(.cover):not(#back-cover) .pda-row,
.page:not(.cover):not(#back-cover) .progress,
.page:not(.cover):not(#back-cover) .cost-meter .meter-head {
  font-size: 9.5px;
  line-height: 1.35;
}

/* Preserve the intentional compact cost table and the AI workbench's footer-safe
   layout while lifting its controls one step above the old micro-type. */
#cost.page:not(.cover):not(#back-cover) .app-shell .ui-table {
  font-size: 9.5px;
  line-height: 1.3;
}

#cost.page:not(.cover):not(#back-cover) .app-shell .ui-table th,
#cost.page:not(.cover):not(#back-cover) .app-shell .ui-table td {
  padding: 4px 3px;
}

#ai-prototype.page:not(.cover):not(#back-cover) .proto-title {
  font-size: 11px;
}

#ai-prototype.page:not(.cover):not(#back-cover) .proto-field label {
  font-size: 9px;
}

#ai-prototype.page:not(.cover):not(#back-cover) .proto-field b {
  font-size: 10px;
}

#ai-prototype.page:not(.cover):not(#back-cover) .status,
#ai-prototype.page:not(.cover):not(#back-cover) .action {
  font-size: 9px;
}

#ai-prototype.page:not(.cover):not(#back-cover) .case-evidence-grid label {
  font-size: 9px;
}

#ai-prototype.page:not(.cover):not(#back-cover) .case-evidence-grid p {
  font-size: 10.5px;
  line-height: 1.4;
}

/* Keep the existing DL AI palette; dark surfaces retain their dedicated light
   text colors while secondary text on white/paper surfaces gains contrast. */
.page:not(.dark):not(.cover):not(#back-cover) .metric-name,
.page:not(.dark):not(.cover):not(#back-cover) .metric-foot,
.page:not(.dark):not(.cover):not(#back-cover) .app-user,
.page:not(.dark):not(.cover):not(#back-cover) .ui-table th,
.page:not(.dark):not(.cover):not(#back-cover) .proto-table th {
  color: #5f7482;
}

@media screen and (max-width: 560px) {
  .page:not(.cover):not(#back-cover) .app-nav .nav-item {
    font-size: 8.5px;
  }
}

@media screen {
  .page:not(.cover):not(#back-cover) .app-top h3 {
    font-size: 13.5px;
  }

  .page:not(.cover):not(#back-cover) .ui-panel h4 {
    font-size: 11.5px;
    line-height: 1.3;
  }

  .page:not(.cover):not(#back-cover) .ui-panel p {
    font-size: 9.5px;
    line-height: 1.45;
  }
}

@media print {
  .page:not(.cover):not(#back-cover) .proto-table {
    font-size: 10.5px;
  }

  .page:not(.cover):not(#back-cover) .status {
    font-size: 9.5px;
  }

  #ai-prototype.page:not(.cover):not(#back-cover) .proto-title {
    font-size: 11.5px;
  }

  #ai-prototype.page:not(.cover):not(#back-cover) .proto-field b {
    font-size: 11px;
  }

  #ai-prototype.page:not(.cover):not(#back-cover) .status {
    font-size: 10px;
  }
}

/* Apply the stronger muted-text tone only on light surfaces; dark-page colors
   remain controlled by their existing theme-specific rules. */
.page:not(.dark):not(.cover):not(#back-cover) .case-evidence-head span,
.page:not(.dark):not(.cover):not(#back-cover) .case-evidence-grid p,
.page:not(.dark):not(.cover):not(#back-cover) .audit-rail p,
.page:not(.dark):not(.cover):not(#back-cover) .proof-card p,
.page:not(.dark):not(.cover):not(#back-cover) .delivery-proof-grid p,
.page:not(.dark):not(.cover):not(#back-cover) .timeline-step p,
.page:not(.dark):not(.cover):not(#back-cover) .rule small,
.page:not(.dark):not(.cover):not(#back-cover) .pain small {
  color: #5f7482;
}

/* Keep the cable measurement heading on one line inside its four-column card. */
#cable .grid-4 > .feature:first-child h3 {
  font-size: 13px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Make the cable-flow matrix's row labels read as a clear, color-coded key. */
#cable-flow .lane-step {
  font-size: 11px;
  line-height: 1.35;
}

#cable-flow .lane-name {
  align-self: stretch;
  justify-content: flex-start;
  min-height: 58px;
  padding: 8px 7px 8px 10px;
  border: 1px solid color-mix(in srgb, var(--lane-accent, var(--teal)) 30%, white);
  border-left: 4px solid var(--lane-accent, var(--teal));
  border-radius: 4px;
  background: var(--lane-tint, var(--soft-teal));
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

#cable-flow > .lane-wrap:nth-of-type(2) .lane-name {
  --lane-accent: var(--teal);
  --lane-tint: var(--soft-teal);
}

#cable-flow > .lane-wrap:nth-of-type(3) .lane-name {
  --lane-accent: var(--orange);
  --lane-tint: var(--soft-orange);
}

#cable-flow > .lane-wrap:nth-of-type(4) .lane-name {
  --lane-accent: var(--blue);
  --lane-tint: var(--soft-blue);
}

#cable-flow > .lane-wrap:nth-of-type(5) .lane-name {
  --lane-accent: var(--purple);
  --lane-tint: var(--soft-purple);
}

#cable-flow > .lane-wrap:nth-of-type(6) .lane-name {
  --lane-accent: var(--green);
  --lane-tint: #e8f5ee;
}

/* Return the mark to the center of the cover's circular motif. Use a quiet
   champagne-gold color wash, with no relief shadow or oversized page-wide fill. */
#cover::before,
#cover::after,
#back-cover::before,
#back-cover::after {
  z-index: 0;
}

#cover::after,
#back-cover::after {
  opacity: 0.24;
}

#cover > .cover-watermark,
#back-cover > .cover-watermark {
  position: absolute;
  z-index: 1;
  /* Fit the complete near-square logo inside the 94mm ring. Avoid clipping
     the mark itself; its corners stay about 6mm inside the circular boundary. */
  right: 41mm;
  bottom: 54mm;
  left: auto;
  top: auto;
  display: block;
  width: 58mm;
  height: 58mm;
  object-fit: contain;
  opacity: 0.015;
  transform: none;
  /* Keep only a barely visible, pale champagne foil hint. */
  filter: brightness(1.55) saturate(0.85) contrast(1.02);
  pointer-events: none;
}

/* A restrained foil glint on the existing cover rules complements the gold mark. */
#cover .cover-line,
#back-cover .back-cover-content .eyebrow::before {
  background: linear-gradient(90deg, #9f7147 0%, #e6ce98 48%, #b88a52 100%);
  box-shadow: none;
}

@media screen and (max-width: 900px) {
  #cover > .cover-watermark,
  #back-cover > .cover-watermark {
    /* Match the same circle geometry in the narrow-screen cover layout. */
    right: 41mm;
    bottom: 54mm;
    width: 58mm;
    height: 58mm;
    opacity: 0.015;
  }
}

@media print {
  #cover > .cover-watermark,
  #back-cover > .cover-watermark {
    opacity: 0.015;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}