/* ═══════════════════════════════════════════════════════════════════════════
 FIGURE STYLES
 
 The schematics and technical drawings the assessment pages include from
 shared/templates/shared/figures/ and shared/templates/shared/partials/.
 
 These used to live in a <style> block inside each figure partial, which
 meant the same drawing vocabulary was written out once per figure, could
 not be cached, and kept style-src pinned to 'unsafe-inline'. See A7 in the
 retired docs/teknisk_kodeplan.md (git history).
 
 Two rules for anything added here:
 
 1. Every selector is scoped to the figure's own wrapper class or id. These
 drawings use short internal class names, .body, .weld, .dim, .label, and
 an unscoped one of those would style half the product.
 2. The colours are the drawing's own, not the theme's. A dimensioned
 engineering drawing is black line work on white; it is not a UI surface
 and does not follow --ds-surface. The design tokens apply to the panels
 the drawings sit in, which are styled in design-system.css.

 That is still true, and it is now written down rather than repeated: the
 drawing palette is the --ds-fig-*, --ds-plate-* and --ds-ctp-* tokens in
 design-system.css, which hold one light palette in both themes. Those three
 sets are the only colours this file may name. A literal here is a bug, the
 same as anywhere else, because #111111 written out thirty-nine times is a
 palette nobody can change.
 ═══════════════════════════════════════════════════════════════════════════ */

/* ══ _nozzle_connection_geometry_schematic.html ══
 Rendered once per page with a caller-supplied svg id, so the rules are
 scoped to the class both variants carry instead of to that id. The arrow
 marker stays per-instance and is referenced by a marker-end attribute in
 the template, because a static stylesheet cannot name a generated id. */

.nozzle-connection-geometry-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.35rem;
}

.nozzle-connection-geometry {
  display: block;
  width: 100%;
  min-width: 700px;
  max-width: 820px;
  height: auto;
  margin: 0 auto;
  background: var(--ds-plate-bg);
  font-family: Arial, Helvetica, sans-serif;
}

.nozzle-connection-geometry .body {
  fill: var(--ds-fig-body);
  stroke: var(--ds-fig-line);
  stroke-width: 1.15;
  stroke-linejoin: miter;
}

.nozzle-connection-geometry .weld {
  fill: var(--ds-fig-weld);
  stroke: var(--ds-fig-line);
  stroke-width: 1.15;
  stroke-linejoin: miter;
}

.nozzle-connection-geometry .dim {
  fill: none;
  stroke: var(--ds-fig-line);
  stroke-width: 1.15;
  stroke-linecap: butt;
}

.nozzle-connection-geometry .dim-ext {
  fill: none;
  stroke: var(--ds-fig-line);
  stroke-width: 1.05;
  stroke-linecap: butt;
}

.nozzle-connection-geometry .dim-label {
  fill: var(--ds-fig-line);
  font-size: 18px;
  font-weight: 400;
}

.nozzle-connection-geometry .cline {
  fill: none;
  stroke: var(--ds-fig-line);
  stroke-width: 1;
  stroke-dasharray: 9 6 2 6;
}

.nozzle-connection-geometry .cl-text {
  fill: var(--ds-fig-line);
  font-size: 18px;
}

/* ══ _nozzle_figure_9b26_map.html ══ */

#nozzle-figure-9b26-map {
  display: block;
  width: 100%;
  min-width: 700px;
  max-width: 820px;
  height: auto;
  margin: 0 auto;
  background: var(--ds-plate-bg);
  font-family: Arial, Helvetica, sans-serif;
}

.nozzle-figure-9b26-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.35rem;
}

#nozzle-figure-9b26-map .body {
  fill: var(--ds-fig-body);
  stroke: var(--ds-fig-line);
  stroke-width: 1.15;
  stroke-linejoin: miter;
}

#nozzle-figure-9b26-map .weld {
  fill: var(--ds-fig-weld);
  stroke: var(--ds-fig-line);
  stroke-width: 1.15;
  stroke-linejoin: miter;
}

#nozzle-figure-9b26-map .line {
  fill: none;
  stroke: var(--ds-fig-line);
  stroke-width: 1.15;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

#nozzle-figure-9b26-map .crack {
  fill: var(--ds-plate-bg);
  stroke: var(--ds-plate-crack);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#nozzle-figure-9b26-map .edge-crack {
  fill: none;
  stroke: var(--ds-plate-crack);
  stroke-width: 1.45;
  stroke-linecap: round;
}

#nozzle-figure-9b26-map .dim {
  fill: none;
  stroke: var(--ds-fig-line);
  stroke-width: 1.15;
  stroke-linecap: butt;
  marker-end: url(#nozzle-9b26-dim-arrow);
}

#nozzle-figure-9b26-map .dim-ext {
  fill: none;
  stroke: var(--ds-fig-line);
  stroke-width: 1.05;
  stroke-linecap: butt;
}

#nozzle-figure-9b26-map .dim-label {
  fill: var(--ds-fig-line);
  font-size: 18px;
  font-weight: 400;
}

#nozzle-figure-9b26-map .cline {
  fill: none;
  stroke: var(--ds-fig-line);
  stroke-width: 1;
  stroke-dasharray: 9 6 2 6;
}

#nozzle-figure-9b26-map .callout text {
  fill: var(--ds-fig-line);
  font-size: 17px;
  dominant-baseline: middle;
  text-anchor: middle;
}

#nozzle-figure-9b26-map .callout circle {
  fill: var(--ds-plate-bg);
  stroke: var(--ds-fig-line);
  stroke-width: 1.15;
}

#nozzle-figure-9b26-map .cl-text {
  fill: var(--ds-fig-line);
  font-size: 18px;
}

/* ══ _nozzle_kncc1_corner_crack_schematic.html ══ */

#kncc1-corner-crack-schematic .body {
  fill: var(--ds-fig-body-alt);
  stroke: var(--ds-plate-ink);
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: square;
}

#kncc1-corner-crack-schematic .line {
  fill: none;
  stroke: var(--ds-plate-ink);
  stroke-width: 1.1;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

#kncc1-corner-crack-schematic .thin {
  stroke-width: 0.9;
}

#kncc1-corner-crack-schematic .centerline {
  fill: none;
  stroke: var(--ds-plate-ink);
  stroke-width: 0.9;
  stroke-dasharray: 18 5 4 5;
  stroke-linecap: butt;
}

#kncc1-corner-crack-schematic .dimension {
  fill: none;
  stroke: var(--ds-plate-ink);
  stroke-width: 1.05;
  marker-start: url(#kncc1-fig927-arrow);
  marker-end: url(#kncc1-fig927-arrow);
}

#kncc1-corner-crack-schematic .angle-dimension {
  fill: none;
  stroke: var(--ds-plate-ink);
  stroke-width: 1.05;
  marker-start: url(#kncc1-fig927-arrow);
  marker-end: url(#kncc1-fig927-arrow);
}

#kncc1-corner-crack-schematic .leader {
  fill: none;
  stroke: var(--ds-plate-ink);
  stroke-width: 1.05;
  marker-end: url(#kncc1-fig927-arrow);
}

#kncc1-corner-crack-schematic .crack-axis {
  fill: none;
  stroke: var(--ds-plate-ink);
  stroke-width: 1.1;
  stroke-dasharray: 13 7;
  marker-end: url(#kncc1-fig927-arrow);
}

#kncc1-corner-crack-schematic .crack-area {
  fill: var(--ds-plate-bg);
  stroke: var(--ds-plate-ink);
  stroke-width: 1.05;
  stroke-linejoin: round;
}

#kncc1-corner-crack-schematic .label {
  fill: var(--ds-plate-ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  dominant-baseline: middle;
}

#kncc1-corner-crack-schematic .math-label {
  fill: var(--ds-plate-ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-style: normal;
  dominant-baseline: middle;
}

/* ══ _fig_4_19_ctp_thickness_averaging.html ══ */

.gml-ctp-averaging-figure {
  width: 100%;
  padding: 0.75rem;
  overflow-x: auto;
  background: var(--ds-plate-bg);
}

.gml-ctp-averaging-figure svg {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
  background: var(--ds-plate-bg);
  font-family: Arial, Helvetica, sans-serif;
}

.gml-f419-label {
  fill: var(--ds-plate-ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.gml-f419-symbol {
  fill: var(--ds-plate-ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
}

.gml-ctp-averaging-figure__equation {
  max-width: 900px;
  margin: 0.5rem auto 0;
  color: var(--ds-plate-ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  text-align: left;
}

.gml-ctp-averaging-figure__math {
  white-space: nowrap;
}

/* ══ _connection_configuration_schematic.html ══ */

/* Self-hosted TeX faces for the nozzle input drawings. The font aliases keep
   these SVGs independent of the equation renderer and installed system fonts.
   Main supplies upright prose and numerals; Math supplies italic variables,
   including the Greek angle symbols absent from the Main text faces. */
@font-face {
  font-family: "CalcHub Figure TeX";
  src: url("../vendor/katex/fonts/KaTeX_Main-Regular.f8a7f19f4506.woff2") format("woff2"),
       url("../vendor/katex/fonts/KaTeX_Main-Regular.818582dae57e.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "CalcHub Figure TeX";
  src: url("../vendor/katex/fonts/KaTeX_Main-Italic.652970624cde.woff2") format("woff2"),
       url("../vendor/katex/fonts/KaTeX_Main-Italic.39349e0a2b36.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "CalcHub Figure TeX";
  src: url("../vendor/katex/fonts/KaTeX_Main-Bold.a9382e25bcf7.woff2") format("woff2"),
       url("../vendor/katex/fonts/KaTeX_Main-Bold.8e431f7ece34.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "CalcHub Figure TeX";
  src: url("../vendor/katex/fonts/KaTeX_Main-BoldItalic.d873734390c7.woff2") format("woff2"),
       url("../vendor/katex/fonts/KaTeX_Main-BoldItalic.52fb39b0434c.ttf") format("truetype");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "CalcHub Figure Math";
  src: url("../vendor/katex/fonts/KaTeX_Math-Italic.d8b7a801bd87.woff2") format("woff2"),
       url("../vendor/katex/fonts/KaTeX_Math-Italic.fe5ed5875d95.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

/* Apply to text itself, not only the SVG root: some partials set Arial or
   Times on individual groups/text, and the wizard stylesheet loads later.
   Preserve all existing font sizes, weights, and upright/italic notation. */
:is(svg.nozzle-orientation-figure, svg.nozzle-dimension-figure,
    svg.nozzle-weld-dimensions,
    svg.configuration-technical-figure[data-connection-kind="nozzle"]) text {
  font-family: "CalcHub Figure TeX", serif;
}

:is(svg.nozzle-orientation-figure, svg.nozzle-dimension-figure,
    svg.nozzle-weld-dimensions,
    svg.configuration-technical-figure[data-connection-kind="nozzle"]) tspan {
  font-family: inherit;
}

svg.nozzle-orientation-figure text.nozzle-orientation-label,
svg.nozzle-dimension-figure .nozzle-dim-symbol text,
svg.nozzle-dimension-figure [font-style="italic"] text,
svg.nozzle-dimension-figure text[font-style="italic"],
svg.nozzle-weld-dimensions text.nwd-symbol,
svg.configuration-technical-figure[data-connection-kind="nozzle"] text.math {
  font-family: "CalcHub Figure Math", "CalcHub Figure TeX", serif;
}

:is(svg.nozzle-orientation-figure, svg.nozzle-dimension-figure,
    svg.nozzle-weld-dimensions,
    svg.configuration-technical-figure[data-connection-kind="nozzle"])
    tspan[font-style="normal"] {
  font-family: "CalcHub Figure TeX", serif;
}

.configuration-technical-figure .configuration-background,
.configuration-technical-figure .configuration-white-region {
  fill: var(--ds-plate-bg);
}

.configuration-technical-figure .component,
.configuration-technical-figure .pad {
  fill: var(--ds-fig-body-light);
  stroke: var(--ds-fig-line);
  stroke-width: 1.55;
}

.configuration-technical-figure .nozzle-wall {
  fill: var(--ds-fig-body-light);
  stroke: var(--ds-fig-line);
  stroke-width: 1.55;
}

.configuration-technical-figure .weld {
  fill: url(#connection-config-weld-metal);
  stroke: var(--ds-fig-line);
  stroke-width: 1.25;
  stroke-linejoin: round;
}

.configuration-technical-figure .weld-metal-background {
  fill: var(--ds-plate-bg);
}

.configuration-technical-figure .weld-metal-dot {
  fill: var(--ds-fig-line);
  stroke: none;
}

.configuration-technical-figure .thin {
  fill: none;
  stroke: var(--ds-fig-line);
  stroke-width: 1.05;
}

.configuration-technical-figure .dimension {
  fill: none;
  stroke: var(--ds-fig-line);
  stroke-width: 1.05;
  marker-start: url(#connection-config-arrow);
  marker-end: url(#connection-config-arrow);
}

.configuration-technical-figure .extension {
  fill: none;
  stroke: var(--ds-fig-line);
  stroke-width: 0.9;
}

.configuration-technical-figure .centerline {
  fill: none;
  stroke: var(--ds-fig-line-faint);
  stroke-width: 0.9;
  stroke-dasharray: 10 5 2 5;
}

.configuration-technical-figure .zone {
  fill: none;
  stroke: var(--ds-fig-line-soft);
  stroke-width: 1;
  stroke-dasharray: 5 4;
}

.configuration-technical-figure .label {
  fill: var(--ds-fig-line);
  font: 15px Arial, sans-serif;
}

.configuration-technical-figure .math {
  fill: var(--ds-fig-line);
  font: italic 17px Georgia, serif;
}

.configuration-technical-figure [data-configuration-drawing][hidden],
.configuration-technical-figure [data-configuration-panel][hidden],
.configuration-technical-figure [data-pad-geometry][hidden] {
  display: none;
}

/* ══ _metal_loss_component_figure.html ══ */

.result-component-figure {
  break-inside: avoid;
  page-break-inside: avoid;
}

.result-component-figure__body {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.result-component-figure__drawing {
  color: var(--ds-fig-component-line);
  display: flex;
  justify-content: center;
  margin: 0;
  min-height: 0;
  width: 100%;
}

.result-component-figure__drawing svg {
  display: block;
  height: auto;
  max-height: 190px;
  max-width: 280px;
  overflow: visible;
  width: 100%;
}

.result-component-figure__drawing svg[data-nozzle-assessed-figure] {
  max-height: none;
  max-width: 520px;
}

.result-component-figure__drawing .component-figure-body,
.result-component-figure__drawing .component-figure-detail {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.result-component-figure__drawing .component-figure-body {
  stroke-width: 2;
}

.result-component-figure__drawing .component-figure-detail {
  stroke-width: 1.4;
}

.result-component-figure__drawing .component-figure-fill {
  fill: var(--ds-fig-component-fill);
}

.result-component-figure__label {
  color: var(--ds-fig-component-label);
  font-size: 0.82rem;
  font-weight: 600;
  margin-top: 0.35rem;
}

/* The report renders the same partial at print sizes. This was a
 an `if print_mode` branch inside the CSS, which a static stylesheet cannot carry;
 the wrapper already marks itself --print, so the modifier says it instead. */

.result-component-figure--print .result-component-figure__label {
  font-size: 9px;
}

.result-component-figure--print .result-component-figure__drawing svg {
  max-height: 120px;
  max-width: 190px;
  width: 190px;
}

.result-component-figure--print .result-component-figure__drawing svg[data-nozzle-assessed-figure] {
  max-height: none;
  max-width: 420px;
  width: 420px;
}

/* ══ _inspection_grid_heatmap.html ══ */

.result-grid-heatmap {
  break-inside: avoid;
  page-break-inside: avoid;
}

.result-grid-heatmap__summary,
.result-grid-heatmap__location {
  color: var(--ds-text-muted);
  font-size: var(--ds-type-sm);
  line-height: 1.45;
  margin: 0 0 var(--ds-space-6);
}

.result-grid-heatmap__layout {
  align-items: center;
  display: grid;
  gap: 4px;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-rows: auto 18px;
}

.result-grid-heatmap__print-layout {
  display: block;
  text-align: center;
}

.result-grid-heatmap__print-y {
  color: var(--ds-fig-label);
  font-size: 7px;
  margin-bottom: 3px;
  text-align: left;
}

.result-grid-heatmap__image {
  border: 1px solid var(--ds-fig-frame);
  display: block;
  height: auto;
  margin: 0 auto;
  max-height: 480px;
  max-width: 100%;
  width: auto;
}

.result-grid-heatmap__x,
.result-grid-heatmap__y {
  color: var(--ds-fig-label);
  font-size: 0.7rem;
  text-align: center;
}

.result-grid-heatmap__y {
  transform: rotate(180deg);
  writing-mode: vertical-rl;
}

.result-grid-heatmap__legend {
  margin: 0.55rem auto 0;
  max-width: 430px;
}

.result-grid-heatmap__legend-bar {
  background: linear-gradient(90deg, var(--ds-ctp-heat-1) 0%, var(--ds-ctp-heat-2) 50%, var(--ds-ctp-heat-3) 75%, var(--ds-ctp-heat-4) 100%);
  border: 1px solid var(--ds-fig-legend-edge);
  border-radius: 8px;
  height: 8px;
}

.result-grid-heatmap__legend-labels {
  color: var(--ds-fig-label);
  display: flex;
  font-size: 0.7rem;
  justify-content: space-between;
}

.result-grid-heatmap__location {
  margin: 0.5rem 0 0;
}

/* Print sizes, previously `if print_mode` branches inside the CSS. */
.result-grid-heatmap--print .result-grid-heatmap__summary,
.result-grid-heatmap--print .result-grid-heatmap__location {
  font-size: 8px;
}

.result-grid-heatmap--print .result-grid-heatmap__image {
  max-height: 300px;
}

.result-grid-heatmap--print .result-grid-heatmap__x,
.result-grid-heatmap--print .result-grid-heatmap__y,
.result-grid-heatmap--print .result-grid-heatmap__legend-labels {
  font-size: 7px;
}

/* Shared dimensioned inspection grid: drawing and annotations scale together. */
.inspection-grid {
  color: var(--ds-text);
  margin: 0;
}

.inspection-grid__drawing {
  display: block;
  height: auto;
  margin: 0 auto;
  max-height: 590px;
  max-width: 100%;
}

.inspection-grid__viewport {
  overflow-x: auto;
}

.inspection-grid__viewport:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  .inspection-grid__drawing--wide {
    max-width: none;
    width: 480px;
  }
}

.inspection-grid__frame,
.inspection-grid__dimension-line,
.inspection-grid__legend-frame {
  stroke: currentColor;
  stroke-width: 1;
}

.inspection-grid__frame,
.inspection-grid__dimension-line {
  fill: none;
}

.inspection-grid__arrow {
  fill: currentColor;
}

.inspection-grid__extension {
  stroke: var(--ds-text-muted);
  stroke-width: 0.7;
}

.inspection-grid__direction,
.inspection-grid__measurement,
.inspection-grid__legend-text {
  fill: currentColor;
  font-family: var(--bs-font-sans-serif);
  font-size: var(--ds-type-sm);
}

.inspection-grid__direction {
  font-weight: 600;
}

.inspection-grid__legend-text {
  font-size: var(--ds-type-lg);
}

.inspection-grid__measurement {
  font-variant-numeric: tabular-nums;
}

.inspection-grid__minimum-halo {
  fill: var(--ds-solid-fg);
  stroke: var(--ds-chrome-bg);
  stroke-width: 1;
}

.inspection-grid__minimum-point {
  fill: var(--ds-chrome-bg);
}

.inspection-grid__legend {
  display: block;
  height: auto;
  margin: var(--ds-space-3) auto 0;
  max-width: 100%;
}

.inspection-grid__average-halo { stroke: var(--ds-surface); stroke-width: 5; }
.inspection-grid__average-line { stroke: currentColor; stroke-width: 2; }

.inspection-grid__caption {
  color: var(--ds-text-muted);
  font-size: var(--ds-type-xs);
  line-height: 1.45;
  margin-top: var(--ds-space-3);
  text-align: center;
}

.result-grid-heatmap--print .inspection-grid__drawing,
.ctp-profile--print .inspection-grid__drawing {
  max-height: 380px;
}

.result-grid-heatmap--print .inspection-grid__legend,
.ctp-profile--print .inspection-grid__legend {
  width: 390px;
}

.result-grid-heatmap--print .inspection-grid__legend-text,
.ctp-profile--print .inspection-grid__legend-text {
  font-size: var(--ds-type-sm);
}

.result-grid-heatmap--print .inspection-grid__caption,
.ctp-profile--print .inspection-grid__caption {
  font-size: 8px;
}

/* ══ figures_showcase.html ══ */

/* A Part in the figures browser: a disclosure whose summary reads as a section
   heading, with the chevron drawn in CSS so the page needs no script. */
.figures-part > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ds-space-4) var(--ds-space-6);
  padding: var(--ds-space-6) 0;
  border-bottom: 1px solid var(--ds-border);
  font-size: var(--ds-type-lg);
  font-weight: 700;
  color: var(--ds-heading);
}

.figures-part > summary::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: var(--ds-space-4);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(-45deg);
  transition: transform 0.15s ease;
}

.figures-part[open] > summary::before { transform: translateY(-0.3em) rotate(45deg); }

.figures-part > summary:hover { color: var(--ds-link-hover); }

.figures-part__subtitle {
  font-size: var(--ds-type-sm);
  font-weight: 400;
  color: var(--ds-text-muted);
}

/* The drawing's frame in the browser. A plate: the older schematics paint
   their labels in dark ink on a transparent SVG, and on a dark page they
   vanished. A dimensioned drawing keeps its paper in both palettes. */
.figure-scale {
  max-width: 70%;
  padding: var(--ds-space-8);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-plate-bg);
  color: var(--ds-plate-ink);
}

/* ══ THE SVG ROOT ITSELF (A7 part 2) ══
 Thirty-nine figures carried the same handful of declarations as a style
 attribute on their <svg> element. Two shapes were in use and both are kept
 as they were rendering, because these partials are also what the report
 renders: WeasyPrint gets this stylesheet directly, and a font stack it
 cannot resolve changes the drawing rather than the page around it.

 --block fills the column it is given. --fit stops at its natural size. The
 font stacks differ between the two families for no reason anyone recorded,
 so neither is changed here; unifying them is a figure decision, not a CSP
 one. */

.figure-svg--block {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ds-plate-bg);
}

.b313-bend-figure,
.b313-branch-figure,
.b313-miter-bend-figure {
  width: 50%;
  margin: 0 auto;
}

.b313-miter-bend-figure {
  max-width: 320px;
}

.b313-miter-bend-figure .figure-zoom-indicator {
  left: var(--ds-space-4);
  right: auto;
}

.figure-svg--block-arial {
  font-family: Arial, Helvetica, sans-serif;
}

.figure-svg--fit {
  max-width: 100%;
  height: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.figure-svg--fit-spaced {
  margin-top: 8px;
}

/* ══ THE ONE RULE THIS FILE SHARES WITH THE APP (A7 part 2) ══
 Several figure partials are wrapped in a div that starts hidden, and the
 report is handed this stylesheet alone, without design-system.css. Without
 the rule here those wrappers would print.

 Note what this rule does *not* cover, which cost a rendered comparison to
 find: elements *inside* an <svg>. WeasyPrint does not apply the document's
 CSS to svg internals, so a <g> carrying only .u-hidden printed on top of the
 selected variant, and every sphere crack, ring configuration and elbow
 diameter basis came out stacked. Those groups use the display presentation
 attribute instead, which is an attribute rather than a style and so is
 outside CSP as well. Measured both ways: with the class the report was
 byte-identical across three different crack geometries, with the attribute it
 is 4.7 kB, 7.8 kB and 6.1 kB.

 It is a copy of a rule in design-system.css, and copies drift;
 tests/test_security.py holds the two files to the same declaration. */
.u-hidden { display: none; }

/* ══ _ctp_profile_analysis.html (A7 part 2) ══
 The computed inspection grid and critical thickness profiles, rendered on the
 GML result page and again in the report. Thirty-five style attributes, and
 more than half of them were the same `{% if print_mode %}9px{% else %}0.82rem
 {% endif %}` fork written out per element.

 That fork is a --print modifier here, the same shape A7 part 1 used for the
 figure partials: the markup already knows which mode it is in, so the
 stylesheet can carry the two sizes instead of the template carrying two
 values per element. The px sizes are the report's, where a 0.82rem that
 resolves against WeasyPrint's root is not the size anybody measured.

 The colours are the drawing's own, per this file's rule 2 at the top. */

.ctp-profile__intro {
  font-size: 0.82rem;
  margin: 0 0 10px;
  line-height: 1.45;
}

.ctp-profile__panel,
.ctp-profile__profile {
  border: 1px solid var(--ds-fig-frame);
  padding: 10px;
  break-inside: avoid;
}

.ctp-profile__panel { margin-bottom: 14px; }
.ctp-profile__profile { min-width: 0; }

.ctp-profile__panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 7px;
}

.ctp-profile__panel-title,
.ctp-profile__profile-title {
  font-size: 0.95rem;
  margin: 0 0 3px;
}

.ctp-profile__profile-title { margin-bottom: 4px; }

.ctp-profile__meta,
.ctp-profile__note,
.ctp-profile__profile-meta {
  font-size: 0.76rem;
  color: var(--ds-fig-label);
}

.ctp-profile__meta--right { text-align: right; }
.ctp-profile__note { margin-top: 7px; }
.ctp-profile__profile-meta { margin: 0 0 7px; }

.ctp-profile__grid {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-rows: auto 18px;
  gap: 4px;
  align-items: center;
}

.ctp-profile__axis {
  font-size: 0.7rem;
  color: var(--ds-fig-label);
  text-align: center;
}

.ctp-profile__axis--vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.ctp-profile__heatmap-cell { text-align: center; }

.ctp-profile__heatmap {
  display: block;
  max-width: 100%;
  max-height: 480px;
  width: auto;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--ds-fig-frame);
}

.ctp-profile__scale {
  max-width: 430px;
  margin: 8px auto 0;
}

.ctp-profile__scale-bar {
  height: 8px;
  border: 1px solid var(--ds-fig-legend-edge);
  border-radius: 8px;
  background: linear-gradient(90deg, var(--ds-ctp-heat-1) 0%, var(--ds-ctp-heat-2) 50%, var(--ds-ctp-heat-3) 75%, var(--ds-ctp-heat-4) 100%);
}

.ctp-profile__scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--ds-fig-label);
}

.ctp-profile__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 10px;
  font-family: 'Latin Modern Roman', 'Cambria Math', 'Times New Roman', serif;
  font-size: 0.76rem;
  color: var(--ds-fig-legend-text);
}

.ctp-profile__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.ctp-profile__swatch {
  display: inline-block;
  width: 24px;
  height: 9px;
  border: 1px solid var(--ds-fig-swatch-edge);
}

.ctp-profile__swatch--loss { background: var(--ds-ctp-band-loss); }
.ctp-profile__swatch--fca { background: var(--ds-ctp-band-fca); }
.ctp-profile__swatch--fca-ml { background: var(--ds-ctp-band-fca-ml); }
.ctp-profile__swatch--remaining-area {
  background: repeating-linear-gradient(125deg, var(--ds-ctp-band-area-bg) 0, var(--ds-ctp-band-area-bg) 4px, var(--ds-ctp-band-area) 4px, var(--ds-ctp-band-area) 5px);
}

.ctp-profile__line {
  display: inline-block;
  width: 24px;
}

.ctp-profile__line--measured { border-top: 2px solid var(--ds-ctp-profile); }
.ctp-profile__line--after-fca-ml { border-top: 2px solid var(--ds-ctp-corrected); }

.ctp-profile__profiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
}

.ctp-profile__plot {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ds-plate-bg);
}

.ctp-profile__table {
  width: 100%;
  margin-top: 7px;
  font-size: 0.75rem;
}

.ctp-profile__table th { text-align: left; }

/* The report. Everything above is the screen; these are the sizes the printed
   page was already using, and the single-column profile grid it needs at
   A4 width. */
.ctp-profile--print .ctp-profile__intro { font-size: 9px; }

.ctp-profile--print .ctp-profile__panel-title,
.ctp-profile--print .ctp-profile__profile-title { font-size: 11px; }

.ctp-profile--print .ctp-profile__meta,
.ctp-profile--print .ctp-profile__note,
.ctp-profile--print .ctp-profile__profile-meta,
.ctp-profile--print .ctp-profile__legend,
.ctp-profile--print .ctp-profile__table { font-size: 8px; }

.ctp-profile--print .ctp-profile__axis,
.ctp-profile--print .ctp-profile__scale-labels { font-size: 7px; }

.ctp-profile--print .ctp-profile__heatmap { max-height: 360px; }

.ctp-profile--print .ctp-profile__profiles { grid-template-columns: 1fr; }

/* _metal_loss_ctp_averaging_length.html: the Table 4.8 note under the
   averaging length. Screen size and report size, same --print shape as the
   rest of this file. */
.ctp-averaging-note {
  margin: 5px 0 0;
  font-size: 0.8rem;
}

.ctp-averaging-note--print { font-size: 8px; }

/* ══ _figure_5_9_result_plot.html ══
 The support-to-support profile, drawn on the LML result page and in the
 report. The two branches of the template are the same drawing in two frames,
 so both frames live here. */

.figure-5-9-report {
  margin: 12px 0;
  break-inside: avoid;
  page-break-inside: avoid;
}

.figure-5-9-frame {
  border: 1px solid var(--ds-fig-frame-edge);
  background: var(--ds-plate-bg);
}

.figure-5-9-frame--report { padding: 5px; }
.figure-5-9-frame--screen { overflow: hidden; }

.figure-5-9-caption {
  margin: 4px 2px 0;
  color: var(--ds-fig-caption);
  font-size: 8px;
  line-height: 1.35;
}

.figure-5-9-body { padding: 12px; }

/* ══ PER-FIGURE SIZING (A7 part 2) ══
 The last of the style attributes in the figure partials: the wrapper's
 max-width and the svg root's own box. One rule per drawing, named after the
 partial that draws it, because a max-width here is the drawing's proportion
 and there is no scale to round it to. Every value is the one that was inline.
 ══════════════════════════════════════════════════════════════════════════ */

.figure-conical-transition-geometry-schematic-1 {
  width:100%;
  max-width:360px;
  margin-inline:auto;
}

.figure-conical-transition-geometry-schematic-2 {
  display:block;
  width:100%;
  height:auto;
  font-family:Arial,'Segoe UI',sans-serif;
}

.geometry-conical-transition-figure [data-transition-region] {
  transition: opacity .15s ease;
}

.figure-cylinder-circumferential-through-wall-schematic-1 {
  width:100%;
  max-width:420px;
}

/* Fixed-ink cylinder drawings need an opaque canvas in both themes. */
.figure-cylinder-circumferential-through-wall-schematic-2,
.figure-fig-9b11-cylinder-twc-longitudinal,
.figure-fig-9b12-cylinder-twc-circumferential {
  background: var(--ds-plate-bg);
}

.figure-cylinder-circumferential-through-wall-schematic-2 {
  display:block;
  width:100%;
  height:auto;
  font-family:'Segoe UI',Arial,sans-serif;
}

.figure-elbow-geometry-flaw-schematic {
  max-width:650px;
  background:var(--ds-plate-bg);
}

.figure-embedded-elliptical-geometry-schematic {
  max-width: 980px;
  margin: 0 auto;
}

.figure-embedded-flaw-schematic {
  min-width: 620px;
}

.figure-fig-2c9-branch-reinforcement {
  max-width:1180px;
  background:var(--ds-plate-bg);
}

.figure-fig-5-10-supplemental-load-cases {
  display:block;
  width:100%;
  max-width:720px;
  height:auto;
  background:var(--ds-plate-bg);
}

.figure-fig-9b11-cylinder-twc-longitudinal {
  display:block;
  width:100%;
  max-width:723px;
  height:auto;
  font-family:Arial,Helvetica,sans-serif;
}

.figure-fig-9b12-cylinder-twc-circumferential {
  max-width:420px;
  height:auto;
  font-family:'Segoe UI',system-ui,sans-serif;
}

.figure-fig-9b13-cylinder-surface-long-infinite {
  width:100%;
  max-width:626px;
}

.figure-fig-9b14-cylinder-surface-circ-360-1 {
  width:100%;
  max-width:644px;
}

.figure-fig-9b14-cylinder-surface-circ-360-2 {
  display:block;
  width:100%;
  height:auto;
  background:var(--ds-plate-bg);
  font-family:'Segoe UI',system-ui,sans-serif;
}

.figure-fig-9b15-cylinder-surface-long-semi-elliptical {
  max-width:456px;
  background:var(--ds-plate-bg);
}

.figure-fig-9b16-cylinder-surface-circ-semi-elliptical-1 {
  width:100%;
  max-width:460px;
}

.figure-fig-9b16-cylinder-surface-circ-semi-elliptical-2 {
  display:block;
  width:100%;
  height:auto;
  background:var(--ds-plate-bg);
  font-family:'Segoe UI',system-ui,sans-serif;
}

.figure-fig-9b17-cylinder-embedded-long-infinite {
  max-width:1016px;
  background:var(--ds-plate-bg);
}

.figure-fig-9b18-cylinder-embedded-circ-360 {
  max-width:1081px;
  background:var(--ds-plate-bg);
}

.figure-fig-9b19-cylinder-embedded-long-elliptical {
  max-width:602px;
  background:var(--ds-plate-bg);
}

.figure-fig-9b20-cylinder-embedded-circ-elliptical {
  max-width:600px;
  background:var(--ds-plate-bg);
}

.figure-fig-9b22-sphere-surface-circ-360 {
  max-width:466px;
  margin:auto;
}

.figure-fig-9b23-sphere-surface-circ-semi-elliptical {
  max-width:466px;
  margin:auto;
}

.figure-fig-9b28-ring-stiffened-cylinders {
  width:100%;
  max-width:503px;
  background:var(--ds-plate-bg);
}

.figure-fig-9b29-sleeve-reinforced-cylinders {
  width:100%;
  max-width:664px;
  background:var(--ds-plate-bg);
}

.figure-fig-9b2-plate-surface-crack {
  max-width:100%;
  height:auto;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  margin-top:12px;
}

.figure-fig-9b30-round-bar-surface-360 {
  max-width:400px;
  height:auto;
  font-family:'Segoe UI',system-ui,sans-serif;
}

.figure-fig-9b31-round-bar-surface-crack {
  max-width:500px;
  height:auto;
  font-family:'Segoe UI',system-ui,sans-serif;
}

.figure-fig-9b32-bolt-surface-crack {
  max-width:500px;
  height:auto;
  font-family:'Segoe UI',system-ui,sans-serif;
}

.figure-fillet-weld-geometry-schematic-1 {
  max-width: 930px;
  margin: 0 auto 12px;
}

.figure-fillet-weld-geometry-schematic-2 {
  max-width: 980px;
  margin: 0 auto;
}

.figure-nozzle-kncc1-corner-crack-schematic {
  width: 100%;
  max-width: 640px;
  height: auto;
  background: var(--ds-plate-bg);
  font-family: Arial, Helvetica, sans-serif;
}

.figure-plate-finite-surface-geometry-schematic {
  max-width: 860px;
  margin: 0 auto;
}

.figure-plate-infinite-surface-geometry-schematic {
  max-width: 721px;
  margin: 0 auto;
}

.figure-plate-kptc-geometry-schematic {
  max-width: 853px;
  margin: 0 auto;
}

.figure-plate-with-hole-kphsc1-geometry-schematic {
  max-width: 1080px;
  margin: 0 auto;
}

.figure-plate-with-hole-kphsc2-geometry-schematic {
  max-width: 1080px;
  margin: 0 auto;
}

.figure-plate-with-hole-kphsc-crack-front-schematic {
  max-width: 1040px;
  margin: 0 auto;
}

.figure-plate-with-hole-kphtc-geometry-schematic {
  max-width: 1080px;
  margin: 0 auto;
}

.figure-plate-with-hole-kphtc-loading-schematic {
  max-width: 760px;
  margin: 0 auto;
}

.figure-sphere-crack-schematic-1 {
  width: 100%;
  max-width: 466px;
}

.figure-sphere-crack-schematic-2 {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ds-plate-bg);
  font-family: Arial, 'Segoe UI', sans-serif;
}

.figure-sphere-geometry-schematic-1 {
  width: 100%;
  max-width: 466px;
  margin-inline: auto;
}

.figure-sphere-geometry-schematic-2 {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ds-plate-bg);
  font-family: Arial, 'Segoe UI', sans-serif;
}

.figure-weld-flaw-orientation-schematic {
  max-width: 560px;
  margin: 0 auto;
}

.figure-conical-shell-geometry-schematic-1 {
  width:100%;
  max-width:311px;
}

.figure-conical-shell-geometry-schematic-2 {
  display:block;
  width:100%;
  height:auto;
  font-family:Arial,'Segoe UI',sans-serif;
}

.figure-elliptical-head-geometry-schematic-1 {
  width:100%;
  max-width:500px;
}

.figure-elliptical-head-geometry-schematic-2 {
  display:block;
  width:100%;
  height:auto;
  font-family:Arial,Helvetica,sans-serif;
}

.figure-spherical-shell-geometry-schematic-1 {
  width: 100%;
  max-width: 420px;
}

.figure-spherical-shell-geometry-schematic-2 {
  display: block;
  width: 100%;
  height: auto;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.figure-torispherical-head-geometry-schematic-1 {
  width:100%;
  max-width:500px;
}

.figure-torispherical-head-geometry-schematic-2 {
  display:block;
  width:100%;
  height:auto;
  font-family:Arial,Helvetica,sans-serif;
}

.figure-fig-4-10-critical-thickness-profile-method {
  max-width:1000px;
  height:auto;
  font-family:'Segoe UI',system-ui,sans-serif;
}

.figure-fig-4-11-sizing-multiple-metal-loss-areas {
  max-width:920px;
  height:auto;
  font-family:'Segoe UI',system-ui,sans-serif;
}

.figure-fig-4-7-inspection-planes-heads-spheres {
  max-width:700px;
  height:auto;
  font-family:'Segoe UI',system-ui,sans-serif;
}

.figure-fig-4-8-inspection-planes-cylinders-cones-bends {
  max-width:900px;
  height:auto;
  font-family:'Segoe UI',system-ui,sans-serif;
}

.figure-fig-4-9-inspection-planes-storage-tanks {
  max-width:760px;
  height:auto;
  font-family:'Segoe UI',system-ui,sans-serif;
}

.figure-fig-5-3-groove-like-flaw {
  max-width:920px;
  background:var(--ds-plate-bg);
}

/* _fillet_weld_crack_orientation_schematic.html renders at two sizes: on its
   own in the wizard step, and smaller inside the residual-stress panel. The
   caller used to pass the max-width as a string; it passes the variant now,
   because a value interpolated into a style attribute is the one shape
   style-src-attr cannot allow. */
.figure-fillet-orientation {
  max-width: 720px;
  margin: 0 auto;
}

.figure-fillet-orientation--compact { max-width: 340px; }

/* The Figure 5.9 profile is built as SVG in Python and inserted with |safe, so
   its root element is parsed HTML and a style attribute on it is governed by
   style-src-attr like any other. See assessment_lml/core/figure_5_9_plot.py.

   The selector is the class the markup already carried, not a new one, and
   that is the whole point: this SVG is stored verbatim in
   SavedAssessment.output_data and rendered again without being regenerated.
   Every assessment saved before A7 part 2 has the old root, which has this
   class and an inline style that enforced CSP now drops. Styling the existing
   class covers old and new rows alike and needs no data migration. */
.figure-5-9-result-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: Arial, sans-serif;
}

/* Shared Part 6 detailed-pit plan view. The same SVG geometry is used by the
   wizard preview, browser result, and PDF report. */
.detailed-pit-map-shell {
  border: 1px solid var(--ds-fig-pit-shell);
  border-radius: 4px;
  background: var(--ds-plate-bg);
  padding: 12px;
}

.detailed-pit-map-preview {
  width: 100%;
  min-height: 280px;
  overflow: auto;
  text-align: center;
}

.detailed-pit-map-figure {
  width: 100%;
}

.detailed-pit-map-svg {
  display: block;
  width: 100%;
  max-width: 720px;
  max-height: 680px;
  height: auto;
  margin: 0 auto;
  background: var(--ds-plate-bg);
  font-family: Arial, Helvetica, sans-serif;
}

.detailed-pit-map-area {
  fill: var(--ds-plate-bg);
  stroke: var(--ds-fig-pit-line);
  stroke-width: 1.4;
}

.detailed-pit-map-grid {
  stroke: var(--ds-fig-pit-grid);
  stroke-width: 0.8;
}

.detailed-pit-map-dimension,
.detailed-pit-map-extension {
  fill: none;
  stroke: var(--ds-fig-pit-line);
  stroke-width: 1;
}

.detailed-pit-map-dimension-label,
.detailed-pit-map-axis-label,
.detailed-pit-map-legend-label {
  fill: var(--ds-fig-pit-label);
  font-size: 13px;
}

.detailed-pit-map-pit {
  stroke: var(--ds-fig-pit-edge);
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
}

.detailed-pit-map-id {
  fill: var(--ds-fig-pit-label);
  font: 12px "Courier New", monospace;
  stroke: var(--ds-plate-bg);
  stroke-width: 2px;
  stroke-linejoin: round;
  paint-order: stroke;
  pointer-events: none;
}

.detailed-pit-map-pit[role="button"] { cursor: pointer; }
.detailed-pit-map-pit:focus-visible { outline: none; stroke: var(--ds-fig-pit-select); stroke-width: 2px; }
.detailed-pit-map-selection {
  fill: none;
  stroke: var(--ds-fig-pit-select);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.detailed-pit-map-label-note,
.detailed-pit-map-inspector {
  max-width: 720px;
  margin: 8px auto 0;
  text-align: left;
  font-size: .82rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
  color: var(--ds-fig-pit-label);
}

.detailed-pit-map-inspector {
  padding: 8px 12px;
  border-left: 2px solid var(--ds-fig-pit-select);
  background: var(--ds-fig-pit-inspector);
}

@media print {
  .detailed-pit-map-label-note,
  .detailed-pit-map-inspector,
  .detailed-pit-map-selection { display: none; }
  [data-pit-map-labels] { visibility: visible; }
}

.detailed-pit-map-legend {
  width: min(70%, 460px);
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ds-fig-pit-grade-1) 0%, var(--ds-fig-pit-grade-2) 50%, var(--ds-fig-pit-grade-3) 75%, var(--ds-fig-pit-grade-4) 100%);
  margin: 8px auto 0;
}

.detailed-pit-map-legend-labels {
  width: min(70%, 460px);
  margin: 3px auto 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ds-fig-pit-line);
  font-size: .82rem;
}

.detailed-pit-map-legend-note {
  margin: 4px 0 0;
  color: var(--ds-fig-pit-note);
  font-size: .82rem;
  text-align: center;
}

.detailed-pit-area-table {
  font-variant-numeric: tabular-nums;
}

.detailed-pit-area-table .value-cell {
  text-align: right;
}

/* ══ shared/figures/mat/_governing_thickness_guide.html ══
 Three details from Figure 3.6 above the t_g field on the Part 3 form. The
 drawings sit on the light plate in both themes, like every other figure; the
 title and the rules under them are page text and follow the theme. */

.mat-tg-guide {
  margin: 0;
}

.mat-tg-guide__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ds-space-4);
  margin-bottom: var(--ds-space-6);
  font-weight: 600;
  color: var(--ds-text);
}

.mat-tg-guide__ref {
  font-size: var(--ds-type-xs);
  font-weight: 400;
  color: var(--ds-text-muted);
}

.mat-tg-guide__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.mat-tg-guide__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ds-space-8);
}

.mat-tg-guide__panel svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ds-plate-bg);
  border: 1px solid var(--ds-fig-frame);
  border-radius: var(--ds-radius-sm);
}

.mat-tg-guide__part {
  fill: var(--ds-fig-body);
  stroke: var(--ds-fig-line);
  stroke-width: 1.2;
  stroke-linejoin: miter;
}

.mat-tg-guide__weld {
  fill: var(--ds-fig-line);
}

.mat-tg-guide__break {
  fill: none;
  stroke: var(--ds-fig-line);
  stroke-width: 1;
}

.mat-tg-guide__centreline {
  stroke: var(--ds-fig-line-faint);
  stroke-width: 0.8;
  stroke-dasharray: 10 3 2 3;
}

.mat-tg-guide__dim {
  stroke: var(--ds-fig-guide-tangent);
  stroke-width: 1.1;
}

.mat-tg-guide__dim--governs {
  stroke: var(--ds-fig-guide-accent);
  stroke-width: 1.6;
}

.mat-tg-guide__arrowhead {
  fill: var(--ds-fig-guide-accent);
}

.mat-tg-guide__leader {
  stroke: var(--ds-fig-guide-label);
  stroke-width: 0.8;
}

.mat-tg-guide__symbol {
  fill: var(--ds-fig-guide-label);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-style: italic;
}

.mat-tg-guide__symbol--governs {
  fill: var(--ds-fig-guide-accent);
  font-weight: 700;
}

.mat-tg-guide__sub {
  font-size: 9px;
  font-style: normal;
}

.mat-tg-guide__note {
  fill: var(--ds-fig-guide-label);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
}

.mat-tg-guide__rule {
  margin: var(--ds-space-4) 0 0;
  font-size: var(--ds-type-sm);
  color: var(--ds-text-secondary);
}

.mat-tg-guide__more {
  margin: var(--ds-space-8) 0 0;
  padding-left: var(--ds-space-10);
  font-size: var(--ds-type-sm);
  color: var(--ds-text-secondary);
}

.mat-tg-guide__more li + li {
  margin-top: var(--ds-space-2);
}

/* Repair-weld cross-section, Figure 9D.16 geometry. */
.repair-weld-schematic {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}

.repair-weld-schematic :is(.repair-weld-schematic__wall, .repair-weld-schematic__weld, .repair-weld-schematic__repair) {
  stroke: var(--ds-fig-line);
  stroke-width: 1;
  stroke-linejoin: miter;
}

.repair-weld-schematic .repair-weld-schematic__wall {
  fill: var(--ds-fig-body-light);
}

.repair-weld-schematic .repair-weld-schematic__weld {
  fill: var(--ds-fig-weld);
}

.repair-weld-schematic .repair-weld-schematic__repair {
  fill: var(--ds-plate-shade);
}

.repair-weld-schematic .repair-weld-schematic__dimension {
  fill: none;
  stroke: var(--ds-fig-line);
  stroke-width: 1;
}

.repair-weld-schematic .repair-weld-schematic__arrow {
  fill: var(--ds-fig-line);
}

.repair-weld-schematic .repair-weld-schematic__label {
  fill: var(--ds-fig-line);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-style: italic;
}

.repair-weld-schematic .repair-weld-schematic__subscript {
  font-size: 11px;
}

.repair-weld-schematic .repair-weld-schematic__crack {
  fill: none;
  stroke: var(--ds-plate-crack);
  stroke-width: 2;
  stroke-linecap: round;
}