/*
 * Forged SVG contract. data-forged-svg="decorative|bespoke" opts into the
 * metal layers; "functional" opts into a single monochrome currentColor layer.
 * "diagram|brand|mask|exempt" are explicit pass-through values and keep their
 * owner paint. Layer forged art: metal/body -> face -> facet -> scars/pits.
 * Geometry owns paths and non-profile stroke widths.
 * Gradients, filters, and glow are not allowed in forged art.
 */

:root {
    --forged-svg-void: #050407;
    --forged-svg-rim: #625a66;
    --forged-svg-body: #29252d;
    --forged-svg-face: #19171c;
    --forged-svg-recess-edge: #3f3943;
    --forged-svg-facet: #817987;
    --forged-svg-scar: #77707b;
    --forged-svg-pit: #0b0a0d;
    --forged-svg-pit-edge: #57515a;
    --forged-svg-rivet: #17151b;
    --forged-svg-accent: var(--c-rp, #7a5af8);
    --forged-svg-metal-width: 2.75;
    --forged-svg-core-width: 2.2;
    --forged-svg-core-face-width: 1.6;
    --forged-svg-outline-width: 1.8;
    --forged-svg-detail-width: 1;
    --forged-svg-facet-width: var(--forged-svg-detail-width);
    --forged-svg-scar-width: var(--forged-svg-detail-width);
    --forged-svg-pit-width: var(--forged-svg-detail-width);
    --forged-svg-facet-opacity: 0.64;
    --forged-svg-scar-opacity: 0.48;
    --forged-svg-motion-duration: 180ms;
    --forged-svg-motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Approved lock/key ornaments use a quieter facet. */
.forged-svg--ornament {
    --forged-svg-facet: #79717c;
}

:where([data-forged-svg]) {
    shape-rendering: geometricPrecision;
}

:where(
    .forged-svg:not([data-forged-svg]),
    .forged-svg--functional:not([data-forged-svg]),
    [data-forged-svg="decorative"],
    [data-forged-svg="bespoke"],
    [data-forged-svg="functional"]
) {
    overflow: visible;
    isolation: isolate;
    shape-rendering: geometricPrecision;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: none;
}

:where(
    svg.forged-svg:not([data-forged-svg]),
    svg[data-forged-svg="decorative"],
    svg[data-forged-svg="bespoke"]
) {
    display: block;
}

:where(
    svg.forged-svg--functional:not([data-forged-svg]),
    svg[data-forged-svg="functional"]
) {
    display: inline-block;
    vertical-align: middle;
}

:where(
    .forged-svg:not([data-forged-svg]),
    [data-forged-svg="decorative"],
    [data-forged-svg="bespoke"]
) *,
:where(
    .forged-svg:not([data-forged-svg]),
    [data-forged-svg="decorative"],
    [data-forged-svg="bespoke"]
)::before,
:where(
    .forged-svg:not([data-forged-svg]),
    [data-forged-svg="decorative"],
    [data-forged-svg="bespoke"]
)::after {
    filter: none;
}

/* SVG <use> clones inherit their own fill; opt stroke-built instances out. */
:where(
    .forged-svg:not([data-forged-svg]),
    [data-forged-svg="decorative"],
    [data-forged-svg="bespoke"]
) .forged-svg__stroke-only {
    fill: none;
}

/* Direct role selectors also paint referenced SVG <use> instance trees. */
.forged-svg__metal {
    fill: none;
    stroke: var(--forged-svg-rim);
    stroke-width: var(--forged-svg-metal-width);
}

.forged-svg__core {
    fill: none;
    stroke: var(--forged-svg-body);
    stroke-width: var(--forged-svg-core-width);
}

:where(
    .forged-svg:not([data-forged-svg]),
    [data-forged-svg="decorative"],
    [data-forged-svg="bespoke"]
) .forged-svg__core-face {
    fill: none;
    stroke: var(--forged-svg-face);
    stroke-width: var(--forged-svg-core-face-width);
}

:where(
    .forged-svg:not([data-forged-svg]),
    [data-forged-svg="decorative"],
    [data-forged-svg="bespoke"]
) .forged-svg__recess {
    fill: none;
    stroke: var(--forged-svg-recess-edge);
    stroke-width: var(--forged-svg-detail-width);
}

:where(
    .forged-svg:not([data-forged-svg]),
    [data-forged-svg="decorative"],
    [data-forged-svg="bespoke"]
) .forged-svg__body {
    fill: var(--forged-svg-body);
    stroke: var(--forged-svg-rim);
    stroke-width: var(--forged-svg-outline-width);
    stroke-linejoin: round;
}

:where(
    .forged-svg:not([data-forged-svg]),
    [data-forged-svg="decorative"],
    [data-forged-svg="bespoke"]
) .forged-svg__face {
    fill: var(--forged-svg-face);
    stroke: var(--forged-svg-recess-edge);
    stroke-width: var(--forged-svg-detail-width);
    stroke-linejoin: round;
}

:where(
    .forged-svg:not([data-forged-svg]),
    [data-forged-svg="decorative"],
    [data-forged-svg="bespoke"]
) .forged-svg__body-recess {
    fill: var(--forged-svg-body);
    stroke: var(--forged-svg-recess-edge);
    stroke-width: var(--forged-svg-outline-width);
    stroke-linejoin: round;
}

:where(
    .forged-svg:not([data-forged-svg]),
    [data-forged-svg="decorative"],
    [data-forged-svg="bespoke"]
) .forged-svg__scar {
    fill: none;
}

.forged-svg__facet {
    fill: none;
    stroke: var(--forged-svg-facet);
    stroke-width: var(--forged-svg-facet-width);
    opacity: var(--forged-svg-facet-opacity);
}

:where(
    .forged-svg:not([data-forged-svg]),
    [data-forged-svg="decorative"],
    [data-forged-svg="bespoke"]
) .forged-svg__scar {
    stroke: var(--forged-svg-scar);
    stroke-width: var(--forged-svg-scar-width);
    opacity: var(--forged-svg-scar-opacity);
}

:where(
    .forged-svg:not([data-forged-svg]),
    [data-forged-svg="decorative"],
    [data-forged-svg="bespoke"]
) :is(.forged-svg__pit, .forged-svg__rivet) {
    stroke: var(--forged-svg-pit-edge);
    stroke-width: var(--forged-svg-pit-width);
}

:where(
    .forged-svg:not([data-forged-svg]),
    [data-forged-svg="decorative"],
    [data-forged-svg="bespoke"]
) .forged-svg__pit {
    fill: var(--forged-svg-pit);
}

:where(
    .forged-svg:not([data-forged-svg]),
    [data-forged-svg="decorative"],
    [data-forged-svg="bespoke"]
) .forged-svg__rivet {
    fill: var(--forged-svg-rivet);
}

:where(
    .forged-svg:not([data-forged-svg]),
    [data-forged-svg="decorative"],
    [data-forged-svg="bespoke"]
) .forged-svg__cutout {
    fill: var(--forged-svg-void);
    stroke: var(--forged-svg-recess-edge);
    stroke-width: var(--forged-svg-detail-width);
}

:where(
    .forged-svg:not([data-forged-svg]),
    [data-forged-svg="decorative"],
    [data-forged-svg="bespoke"]
) .forged-svg__accent {
    fill: var(--forged-svg-accent);
    stroke: var(--forged-svg-accent);
}

/* Exact repeated construction profiles; SVG paths and composition stay local. */
.forged-svg__profile--woven {
    --forged-svg-metal-width: 9;
    --forged-svg-core-width: 6;
    --forged-svg-facet-width: 1.25;
    --forged-svg-facet-opacity: 0.62;
    stroke-linecap: butt;
    stroke-linejoin: round;
}

.forged-svg__profile--large-shackle {
    --forged-svg-metal-width: 15;
    --forged-svg-core-width: 11;
    --forged-svg-core-face-width: 6;
    --forged-svg-facet-width: 1.35;
    --forged-svg-facet-opacity: 0.62;
    stroke-linecap: butt;
    stroke-linejoin: round;
}

.forged-svg__profile--compact-shackle {
    --forged-svg-metal-width: 13;
    --forged-svg-core-width: 9;
    --forged-svg-core-face-width: 4.8;
    --forged-svg-facet-width: 1.3;
    --forged-svg-facet-opacity: 0.64;
    stroke-linecap: butt;
    stroke-linejoin: round;
}

:is(
    .forged-svg__profile--woven,
    .forged-svg__profile--large-shackle,
    .forged-svg__profile--compact-shackle
) .forged-svg__facet,
:is(
    .forged-svg__profile--woven,
    .forged-svg__profile--large-shackle,
    .forged-svg__profile--compact-shackle
).forged-svg__facet {
    stroke-linecap: round;
}

.forged-svg__layer--far {
    opacity: 0.88;
}

.forged-svg__layer--near {
    opacity: 0.99;
}

:where(.forged-svg--functional:not([data-forged-svg]), [data-forged-svg="functional"]) {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--forged-svg-icon-stroke, 2);
    stroke-linecap: round;
    stroke-linejoin: round;
}

:where(.forged-svg--functional:not([data-forged-svg]), [data-forged-svg="functional"]) .forged-svg__icon-stroke {
    fill: none;
    stroke: currentColor;
}

:where(.forged-svg--functional:not([data-forged-svg]), [data-forged-svg="functional"])
    .forged-svg__icon-stroke :is(path, circle, ellipse, line, polyline, polygon, rect) {
    stroke: currentColor;
}

:where(.forged-svg--functional:not([data-forged-svg]), [data-forged-svg="functional"]) .forged-svg__icon-fill {
    fill: currentColor;
    stroke: none;
}

:where(.forged-svg--functional:not([data-forged-svg]), [data-forged-svg="functional"])
    .forged-svg__icon-fill :is(path, circle, ellipse, line, polyline, polygon, rect) {
    fill: currentColor;
    stroke: none;
}

.forged-svg--decorative {
    pointer-events: none;
    user-select: none;
}

.forged-svg--interactive,
.forged-svg-control :where(.forged-svg--functional:not([data-forged-svg]), [data-forged-svg="functional"]) {
    opacity: var(--forged-svg-idle-opacity, 0.78);
    transition:
        color var(--forged-svg-motion-duration) var(--forged-svg-motion-ease),
        opacity var(--forged-svg-motion-duration) var(--forged-svg-motion-ease),
        transform var(--forged-svg-motion-duration) var(--forged-svg-motion-ease);
}

.forged-svg--interactive:is(:hover, :focus-visible),
.forged-svg-control:is(:hover, :focus-visible) :where(.forged-svg--functional:not([data-forged-svg]), [data-forged-svg="functional"]) {
    opacity: 1;
    transform: translateY(-1px);
}

.forged-svg--interactive:is(.is-active, [data-state="active"], [aria-pressed="true"], [aria-current]:not([aria-current="false"])),
.forged-svg-control:is(.is-active, [data-state="active"], [aria-pressed="true"], [aria-current]:not([aria-current="false"])) :where(.forged-svg--functional:not([data-forged-svg]), [data-forged-svg="functional"]) {
    color: var(--forged-svg-active-color, currentColor);
    opacity: 1;
}

.forged-svg--interactive:is(.is-disabled, [aria-disabled="true"]),
.forged-svg-control:is(:disabled, .is-disabled, [aria-disabled="true"]) :where(.forged-svg--functional:not([data-forged-svg]), [data-forged-svg="functional"]) {
    opacity: var(--forged-svg-disabled-opacity, 0.36);
    transform: none;
}

.forged-svg--motion {
    transform-box: var(--forged-svg-transform-box, view-box);
    transform-origin: var(--forged-svg-transform-origin, center);
}

@media (prefers-reduced-motion: reduce) {
    .forged-svg--motion,
    .forged-svg--motion *,
    .forged-svg--interactive,
    .forged-svg-control :where(.forged-svg--functional:not([data-forged-svg]), [data-forged-svg="functional"]) {
        animation: none !important;
        transition: none !important;
    }

    .forged-svg--interactive:is(:hover, :focus-visible),
    .forged-svg-control:is(:hover, :focus-visible) :where(.forged-svg--functional:not([data-forged-svg]), [data-forged-svg="functional"]) {
        transform: none;
    }
}

html.telegram-performance-low .forged-svg--motion,
html.telegram-performance-low .forged-svg--motion *,
html.telegram-performance-low .forged-svg--interactive,
html.telegram-performance-low .forged-svg-control :where(.forged-svg--functional:not([data-forged-svg]), [data-forged-svg="functional"]) {
    animation: none !important;
    transition: none !important;
}

html.telegram-performance-low .forged-svg--interactive:is(:hover, :focus-visible),
html.telegram-performance-low .forged-svg-control:is(:hover, :focus-visible) :where(.forged-svg--functional:not([data-forged-svg]), [data-forged-svg="functional"]) {
    transform: none;
}