/* Technical figures share semantic tokens and Archivo with the website.
   Shape, dashes and explicit labels preserve meaning without colour. */
    .plate-line, .plate-muted, .plate-blue, .plate-dash {
      fill: none;
      stroke: var(--text);
      stroke-width: 1.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }
    .plate-muted { stroke: var(--border-strong); stroke-width: 1; }
    .plate-blue { stroke: var(--accent); stroke-width: 2; }
    .plate-dash { stroke: var(--text-secondary); stroke-dasharray: 5 6; stroke-width: 1; }
    .plate-fill { fill: var(--surface-muted); stroke: var(--text); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
    .plate-blue-fill { fill: var(--accent); }
    .plate-particle { fill: none; stroke: var(--text-secondary); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
    .plate-label { fill: var(--text-secondary); font: 12px var(--sans); letter-spacing: .06em; }
    .plate-label--blue { fill: var(--accent); }
    .plate-title { fill: var(--text); font: 600 15px var(--sans); letter-spacing: -.01em; }
    .plate-number { fill: var(--accent); font: 12px var(--sans); letter-spacing: .06em; }
    .plate-method { fill: var(--text); font: 500 12px var(--sans); letter-spacing: .04em; }
    .plate-solid { fill: var(--text); }
    .plate-risk { fill: var(--accent-soft); stroke: none; }
    .plate-blue-dash { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }

    .paper-structure-plate { display: block; width: 100%; height: auto; overflow: visible; }
    .paper-structure-plate .structure-outline,
    .paper-structure-plate .structure-detail,
    .paper-structure-plate .structure-leader {
      fill: none;
      stroke: var(--text);
      stroke-width: 1.15;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }
    .paper-structure-plate .structure-detail { stroke-width: .85; }
    .paper-structure-plate .structure-muted { fill: var(--surface-muted); stroke: var(--text); stroke-width: 1; vector-effect: non-scaling-stroke; }
    .paper-structure-plate .structure-blue { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
    .paper-structure-plate .structure-blue-fill { fill: var(--accent); }

    .hero-model-bond {
      fill: none;
      stroke: var(--model-bond, var(--border-strong));
      stroke-width: var(--model-stroke, 1.2);
      stroke-linecap: round;
      vector-effect: non-scaling-stroke;
    }
    .hero-model-atom {
      fill: var(--surface-raised);
      stroke: var(--model-atom, var(--text-secondary));
      stroke-width: var(--model-atom-stroke, 1);
      vector-effect: non-scaling-stroke;
    }

    .section-material--graphite .hero-model-bond--layer-1 { stroke: var(--accent); }
    .product-model {
      --model-bond: var(--text);
      --model-atom: var(--text);
      --model-stroke: 1.1;
      overflow: visible;
    }
    .product-model--graphite .hero-model-bond--layer-1 { stroke: var(--accent); }
    .product-model--graphite .hero-model-atom--layer-1 { stroke: var(--accent); }
    .section-material--graphite .hero-model-atom--layer-1 { stroke: var(--accent); }

    .diagram-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      width: fit-content;
      max-width: 100%;
      min-height: 44px;
      margin-top: 8px;
      border-bottom: 1px solid var(--border);
      color: var(--text);
      font: 550 var(--type-control)/1.4 var(--sans);
      text-decoration: none;
    }
    .diagram-link:hover { color: var(--accent); border-color: var(--accent); }
    .diagram-link span { margin-top: 0; color: inherit; font-size: 1rem; }
    .visual-note strong { display: block; margin-bottom: 6px; color: var(--text); font-weight: 550; }