/* ═══════════════════════════════════════════════════════════════════════════
 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
 docs/teknisk_kodeplan.md.
 
 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.
 ═══════════════════════════════════════════════════════════════════════════ */

/* ══ _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: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

.nozzle-connection-geometry .body {
  fill: #e6e6e6;
  stroke: #111111;
  stroke-width: 1.15;
  stroke-linejoin: miter;
}

.nozzle-connection-geometry .weld {
  fill: #b8b8b8;
  stroke: #111111;
  stroke-width: 1.15;
  stroke-linejoin: miter;
}

.nozzle-connection-geometry .dim {
  fill: none;
  stroke: #111111;
  stroke-width: 1.15;
  stroke-linecap: butt;
}

.nozzle-connection-geometry .dim-ext {
  fill: none;
  stroke: #111111;
  stroke-width: 1.05;
  stroke-linecap: butt;
}

.nozzle-connection-geometry .dim-label {
  fill: #111111;
  font-size: 18px;
  font-weight: 400;
}

.nozzle-connection-geometry .cline {
  fill: none;
  stroke: #111111;
  stroke-width: 1;
  stroke-dasharray: 9 6 2 6;
}

.nozzle-connection-geometry .cl-text {
  fill: #111111;
  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: #ffffff;
  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: #e6e6e6;
  stroke: #111111;
  stroke-width: 1.15;
  stroke-linejoin: miter;
}

#nozzle-figure-9b26-map .weld {
  fill: #b8b8b8;
  stroke: #111111;
  stroke-width: 1.15;
  stroke-linejoin: miter;
}

#nozzle-figure-9b26-map .line {
  fill: none;
  stroke: #111111;
  stroke-width: 1.15;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

#nozzle-figure-9b26-map .crack {
  fill: #ffffff;
  stroke: #dc3545;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#nozzle-figure-9b26-map .edge-crack {
  fill: none;
  stroke: #dc3545;
  stroke-width: 1.45;
  stroke-linecap: round;
}

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

#nozzle-figure-9b26-map .dim-ext {
  fill: none;
  stroke: #111111;
  stroke-width: 1.05;
  stroke-linecap: butt;
}

#nozzle-figure-9b26-map .dim-label {
  fill: #111111;
  font-size: 18px;
  font-weight: 400;
}

#nozzle-figure-9b26-map .cline {
  fill: none;
  stroke: #111111;
  stroke-width: 1;
  stroke-dasharray: 9 6 2 6;
}

#nozzle-figure-9b26-map .callout text {
  fill: #111111;
  font-size: 17px;
  dominant-baseline: middle;
  text-anchor: middle;
}

#nozzle-figure-9b26-map .callout circle {
  fill: #ffffff;
  stroke: #111111;
  stroke-width: 1.15;
}

#nozzle-figure-9b26-map .cl-text {
  fill: #111111;
  font-size: 18px;
}

/* ══ _nozzle_kncc1_corner_crack_schematic.html ══ */

#kncc1-corner-crack-schematic .body {
  fill: #e3e3e3;
  stroke: #000;
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: square;
}

#kncc1-corner-crack-schematic .line {
  fill: none;
  stroke: #000;
  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: #000;
  stroke-width: 0.9;
  stroke-dasharray: 18 5 4 5;
  stroke-linecap: butt;
}

#kncc1-corner-crack-schematic .dimension {
  fill: none;
  stroke: #000;
  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: #000;
  stroke-width: 1.05;
  marker-start: url(#kncc1-fig927-arrow);
  marker-end: url(#kncc1-fig927-arrow);
}

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

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

#kncc1-corner-crack-schematic .crack-area {
  fill: #fff;
  stroke: #000;
  stroke-width: 1.05;
  stroke-linejoin: round;
}

#kncc1-corner-crack-schematic .label {
  fill: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  dominant-baseline: middle;
}

#kncc1-corner-crack-schematic .math-label {
  fill: #000;
  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: #ffffff;
}

.gml-ctp-averaging-figure svg {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
  background: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

.gml-f419-label {
  fill: #000000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.gml-f419-symbol {
  fill: #000000;
  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: #000000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  text-align: left;
}

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

/* ══ _connection_configuration_schematic.html ══ */
.configuration-technical-figure .configuration-background,
.configuration-technical-figure .configuration-white-region {
  fill: #ffffff;
}

.configuration-technical-figure .component,
.configuration-technical-figure .pad {
  fill: #dddddd;
  stroke: #111111;
  stroke-width: 1.55;
}

.configuration-technical-figure .nozzle-wall {
  fill: #dddddd;
  stroke: #111111;
  stroke-width: 1.55;
}

.configuration-technical-figure .weld {
  fill: #111111;
  stroke: #111111;
  stroke-width: 0.8;
}

.configuration-technical-figure .thin {
  fill: none;
  stroke: #111111;
  stroke-width: 1.05;
}

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

.configuration-technical-figure .extension {
  fill: none;
  stroke: #111111;
  stroke-width: 0.9;
}

.configuration-technical-figure .centerline {
  fill: none;
  stroke: #444444;
  stroke-width: 0.9;
  stroke-dasharray: 10 5 2 5;
}

.configuration-technical-figure .zone {
  fill: none;
  stroke: #333333;
  stroke-width: 1;
  stroke-dasharray: 5 4;
}

.configuration-technical-figure .label {
  fill: #111111;
  font: 15px Arial, sans-serif;
}

.configuration-technical-figure .math {
  fill: #111111;
  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],
.configuration-technical-figure [data-no-pad-geometry][hidden] {
  display: none;
}

/* ══ _unsupported_length_guide.html ══ */

.unsupported-length-guide {
  border: 1px solid #ccd6df;
  border-radius: .25rem;
  background: #f8fafc;
}

.unsupported-length-guide > summary {
  cursor: pointer;
  padding: .55rem .75rem;
  color: #24557a;
  font-weight: 600;
}

.unsupported-length-guide__body {
  border-top: 1px solid #dbe3ea;
  padding: .65rem .75rem .75rem;
  font-size: .875rem;
}

.unsupported-length-guide__body svg {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  margin: 0 auto .5rem;
}

.unsupported-length-guide__shell {
  fill: #eef4f8;
  stroke: #344f63;
  stroke-width: 2;
}

.unsupported-length-guide__ring {
  fill: #dbe8f1;
  stroke: #344f63;
  stroke-width: 1.5;
}

.unsupported-length-guide__support {
  stroke: #b44b3e;
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

.unsupported-length-guide__tangent,
.unsupported-length-guide__subdivision {
  stroke: #778894;
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.unsupported-length-guide__dimension {
  stroke: #24557a;
  stroke-width: 1.4;
}

.unsupported-length-guide__panel-title,
.unsupported-length-guide__dimension-label {
  fill: #1e3445;
  font-size: 13px;
  font-weight: 600;
}

.unsupported-length-guide__label,
.unsupported-length-guide__minor-label {
  fill: #536774;
  font-size: 10px;
}

/* ══ _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: #5f6b76;
  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 .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: #d9dee3;
}

.result-component-figure__label {
  color: #4f5b66;
  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;
}

/* ══ _inspection_grid_heatmap.html ══ */

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

.result-grid-heatmap__summary,
.result-grid-heatmap__location {
  color: #596572;
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 0 0 0.65rem;
}

.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: #596572;
  font-size: 7px;
  margin-bottom: 3px;
  text-align: left;
}

.result-grid-heatmap__image {
  border: 1px solid #d5dce3;
  display: block;
  height: auto;
  margin: 0 auto;
  max-height: 480px;
  max-width: 100%;
  width: auto;
}

.result-grid-heatmap__x,
.result-grid-heatmap__y {
  color: #596572;
  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, rgb(239,34,34) 0%, rgb(245,139,18) 50%, rgb(250,204,21) 75%, rgb(22,163,74) 100%);
  border: 1px solid #c8d0d8;
  border-radius: 8px;
  height: 8px;
}

.result-grid-heatmap__legend-labels {
  color: #596572;
  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;
}

/* ══ figures_showcase.html ══ */

.figure-part-toggle .figure-chevron {
  transition: transform 0.15s ease;
}

.figure-part-toggle.collapsed .figure-chevron {
  transform: rotate(-90deg);
}

.figure-scale {
  max-width: 70%;
}

/* ══ _fig_2c9_branch_reinforcement.html ══
 The arrow markers carry a caller-supplied id prefix, so they are named
 by marker-start/marker-end attributes in the template rather than here. */

.f29-outline {
  stroke:#111111;
  stroke-width:1.25;
  stroke-linejoin:miter;
  stroke-linecap:butt;
}

.f29-line {
  stroke:#111111;
  stroke-width:1.05;
  fill:none;
  stroke-linecap:butt;
  stroke-linejoin:miter;
}

.f29-dim {
  stroke:#111111;
  stroke-width:1.05;
  fill:none;
}

.f29-dim-inward {
  stroke:#111111;
  stroke-width:1.05;
  fill:none;
}

.f29-angle {
  stroke:#111111;
  stroke-width:1.05;
  fill:none;
}

.f29-leader {
  stroke:#111111;
  stroke-width:1.05;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.f29-leader-narrow {
  stroke:#111111;
  stroke-width:1.05;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.f29-dash {
  stroke:#111111;
  stroke-width:1.05;
  fill:none;
  stroke-dasharray:9 7;
}

.f29-pocket-dash {
  stroke:#111111;
  stroke-width:1.05;
  fill:none;
  stroke-dasharray:8 5;
  stroke-linecap:butt;
  stroke-linejoin:miter;
}

.f29-text {
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  fill:#111111;
}

.f29-small {
  font-family:Arial,Helvetica,sans-serif;
  font-size:10.5px;
  fill:#111111;
}

.f29-label {
  font-family:Arial,Helvetica,sans-serif;
  font-size:11.5px;
  fill:#111111;
}

.f29-area {
  fill:#ffffff;
  stroke:#111111;
  stroke-width:1.05;
}

/* ══ 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: #ffffff;
}

.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 #d5dce3;
  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: #596572;
}

.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: #596572;
  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 #d5dce3;
}

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

.ctp-profile__scale-bar {
  height: 8px;
  border: 1px solid #c8d0d8;
  border-radius: 8px;
  background: linear-gradient(90deg, rgb(239,34,34) 0%, rgb(245,139,18) 50%, rgb(250,204,21) 75%, rgb(22,163,74) 100%);
}

.ctp-profile__scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #596572;
}

.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: #536679;
}

.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 #7c8791;
}

.ctp-profile__swatch--loss { background: #f2d39b; }
.ctp-profile__swatch--fca { background: #9fcfdd; }
.ctp-profile__swatch--fca-ml { background: #cbb8dd; }
.ctp-profile__swatch--remaining-area {
  background: repeating-linear-gradient(125deg, #edf7fd 0, #edf7fd 4px, #9fcce7 4px, #9fcce7 5px);
}

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

.ctp-profile__line--measured { border-top: 2px solid #243746; }
.ctp-profile__line--after-fca-ml { border-top: 2px solid #725a9c; }

.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: #fff;
}

.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 #d6dde5;
  background: #fff;
}

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

.figure-5-9-caption {
  margin: 4px 2px 0;
  color: #6c757d;
  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;
}

.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:#ffffff;
}

.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:#ffffff;
}

.figure-fig-5-10-supplemental-load-cases {
  display:block;
  width:100%;
  max-width:720px;
  height:auto;
  background:#ffffff;
}

.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:#ffffff;
  font-family:'Segoe UI',system-ui,sans-serif;
}

.figure-fig-9b15-cylinder-surface-long-semi-elliptical {
  max-width:456px;
  background:#ffffff;
}

.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:#ffffff;
  font-family:'Segoe UI',system-ui,sans-serif;
}

.figure-fig-9b17-cylinder-embedded-long-infinite {
  max-width:1016px;
  background:#ffffff;
}

.figure-fig-9b18-cylinder-embedded-circ-360 {
  max-width:1081px;
  background:#ffffff;
}

.figure-fig-9b19-cylinder-embedded-long-elliptical {
  max-width:602px;
  background:#ffffff;
}

.figure-fig-9b20-cylinder-embedded-circ-elliptical {
  max-width:600px;
  background:#ffffff;
}

.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:#ffffff;
}

.figure-fig-9b29-sleeve-reinforced-cylinders {
  width:100%;
  max-width:664px;
  background:#ffffff;
}

.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: #fff;
  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: #ffffff;
  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: #ffffff;
  font-family: Arial, 'Segoe UI', sans-serif;
}

.figure-weld-flaw-orientation-schematic {
  max-width: 720px;
  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:#ffffff;
}

/* _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 #d7dde5;
  border-radius: 4px;
  background: #fff;
  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: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.detailed-pit-map-area {
  fill: #fff;
  stroke: #4b5563;
  stroke-width: 1.4;
}

.detailed-pit-map-grid {
  stroke: #e7ebf0;
  stroke-width: 0.8;
}

.detailed-pit-map-dimension,
.detailed-pit-map-extension {
  fill: none;
  stroke: #4b5563;
  stroke-width: 1;
}

.detailed-pit-map-dimension-label,
.detailed-pit-map-axis-label,
.detailed-pit-map-legend-label {
  fill: #374151;
  font-size: 13px;
}

.detailed-pit-map-pit {
  stroke: #7f1d1d;
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
}

.detailed-pit-map-id {
  fill: #374151;
  font: 12px "Courier New", monospace;
  stroke: #fff;
  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: #2e6da4; stroke-width: 2px; }
.detailed-pit-map-selection {
  fill: none;
  stroke: #2e6da4;
  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: #374151;
}

.detailed-pit-map-inspector {
  padding: 8px 12px;
  border-left: 2px solid #2e6da4;
  background: #f2f4f7;
}

@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, #2eaf62 0%, #ffd034 50%, #ff912c 75%, #ee0000 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: #4b5563;
  font-size: .82rem;
}

.detailed-pit-map-legend-note {
  margin: 4px 0 0;
  color: #6b7280;
  font-size: .82rem;
  text-align: center;
}

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

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