/* =========================================================
   Pendax diagram language – reusable schematic styling
   ---------------------------------------------------------
   A small, brand-tokened visual grammar for inline SVG
   schematics (nodes, wires, labels, legend). Used by SOLO
   Academy articles but intentionally generic so the same
   look can be reused elsewhere on the site. Element classes
   are applied to inline <svg> children; text labels live in
   the (per-language) markup that includes this stylesheet.
   ========================================================= */
.pendax-diagram { margin: 1.6rem 0 0.5rem; }
.pendax-diagram__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pendax-diagram svg {
    display: block;
    width: 100%;
    height: auto;
    min-width: 540px;            /* keep the schematic legible; scroll on narrow screens */
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.pendax-diagram figcaption {
    font-size: 0.85rem;
    color: var(--ink-muted);
    margin-top: 0.65rem;
    line-height: 1.55;
    max-width: 44rem;
}
.pendax-diagram figcaption strong { color: var(--ink); }

/* ---- SVG nodes (boxes) ---- */
.dg-node { fill: var(--surface); stroke: rgba(29, 29, 29, 0.18); stroke-width: 1.5; }
.dg-node--legacy  { fill: #e9e7e2; stroke: #b6b0a4; }
.dg-node--central { fill: #34302b; stroke: #211e1a; }      /* the "black box" */
.dg-node--solo    { fill: var(--pendax-accent); stroke: var(--pendax-accent-strong); }
.dg-node--relay   { fill: #f1e9dc; stroke: var(--pendax-accent); }
.dg-node--motor   { fill: #ffffff; stroke: rgba(29, 29, 29, 0.28); }
.dg-node--cloud   { fill: #eef1f4; stroke: #c2ccd6; }
.dg-node--external{ fill: #eef0f2; stroke: #6b7684; }      /* an authoritative outside system, e.g. a certified fire-alarm panel */

/* Inner parts of an integrated unit (e.g. SOLO = Datakällor + Beslutsmotor) */
.dg-subnode  { fill: #ffffff; stroke: rgba(140, 106, 68, 0.55); stroke-width: 1; }
.dg-sublabel { font-family: var(--font-sans); font-size: 11px; font-weight: 600; fill: var(--ink); }

/* Flowchart-style glyphs: parallelogram = data, diamond = decision */
.dg-glyph { fill: #ffffff; stroke: rgba(29, 29, 29, 0.6); stroke-width: 1.2; }

/* ---- SVG labels ---- */
.dg-label        { font-family: var(--font-sans); font-size: 13px; font-weight: 600; fill: var(--ink); }
.dg-label--light { fill: #ffffff; }
.dg-label--muted { font-size: 11px; font-weight: 500; fill: var(--ink-muted); }
.dg-label--light.dg-label--muted { fill: rgba(255, 255, 255, 0.75); }

/* ---- SVG wires (connections) ---- */
.dg-wire          { fill: none; stroke-width: 2; }
.dg-wire--copper  { stroke: #b07a3c; stroke-width: 2.5; opacity: 0.85; }
.dg-wire--power   { stroke: rgba(29, 29, 29, 0.38); stroke-width: 2; }
.dg-wire--wireless{ stroke: var(--pendax-accent-strong); stroke-width: 1.6; stroke-dasharray: 4 5; }

/* ---- Legend ---- */
.dg-legend {
    display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem;
    margin-top: 0.7rem; font-size: 0.78rem; color: var(--ink-muted);
}
.dg-legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.dg-legend i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; flex: none; }
.dg-legend i.sw--central  { background: #34302b; }
.dg-legend i.sw--legacy   { background: #e9e7e2; border: 1px solid #b6b0a4; }
.dg-legend i.sw--solo     { background: var(--pendax-accent); }
.dg-legend i.sw--relay    { background: #f1e9dc; border: 1px solid var(--pendax-accent); }
.dg-legend i.sw--motor    { background: #fff; border: 1px solid rgba(29, 29, 29, 0.28); }
.dg-legend i.sw--cloud    { background: #eef1f4; border: 1px solid #c2ccd6; }
.dg-legend i.sw--external { background: #eef0f2; border: 1px solid #6b7684; }
.dg-legend i.sw--copper   { background: #b07a3c; }
.dg-legend i.sw--wireless { background: transparent; border: 1px dashed var(--pendax-accent-strong); }

/* Cut marker (e.g. "clip the motor cables here") */
.dg-cut { stroke: #b4462f; stroke-width: 2.5; stroke-dasharray: 7 5; fill: none; }
.dg-cutlabel { font-family: var(--font-sans); font-size: 11px; font-weight: 700; fill: #b4462f; }
.dg-legend i.sw--cut { background: transparent; border: 1px dashed #b4462f; }

/* Building container (portfolio / hub diagrams) */
.dg-building { fill: #f5f2ed; stroke: rgba(29, 29, 29, 0.16); stroke-width: 1.5; }
.dg-legend i.sw--building { background: #f5f2ed; border: 1px solid rgba(29, 29, 29, 0.22); }

/* Iceberg-style cost diagrams: a dark "traditional" mass and a gold "SOLO"
   mass sitting in the same water, split by a waterline into a visible tip
   and a submerged, hidden part. */
.dg-water { fill: #eaf3f6; }
.dg-waterline { stroke: #6ea1b4; stroke-width: 1.5; stroke-dasharray: 5 4; }
.dg-iceberg--traditional { fill: var(--ink); stroke: #100f0d; stroke-width: 1; }
.dg-iceberg--solo { fill: var(--pendax-accent); stroke: var(--pendax-accent-strong); stroke-width: 1; }
.dg-legend i.sw--iceberg-traditional { background: var(--ink); }