/* Arcane Circuits THEME v2: motif utilities (Bigpappa 17 lane A). Load AFTER tokens.css. Every colour is a token; the only literal colour is the rain
tile, which is a mask (its ink comes from --rain-ink). Every animation is declared only under prefers-reduced-motion: no-preference.
Classes: ac-rim, ac-plate, ac-trace, ac-pad, ac-glow-*, ac-runes, ac-lightning, ac-rain. THEME.md says when to use each. */
/* ---------- ac-rim: bevelled metal ring around any round thing ----------
(a square box; the child fills the inside)
Modifiers: ac-rim--thin (3px), ac-rim--thick (10px), ac-rim--brass (brass ring). Size the rim box; the ring is inside it. */
.ac-rim {
--_w: var(--rim-width);
position: relative; box-sizing: border-box; aspect-ratio: 1; padding: var(--_w);
border-radius: 50%; background: var(--rim-gradient); box-shadow: var(--glow-soft), 0 2px 6px rgb(0 0 0 / 0.35);
}
.ac-rim > * { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; object-fit: cover; background: var(--void); }
.ac-rim::after { /* the bevel: a lit outer edge, a lit inner lip, a shadowed lower inner edge */
content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22), inset 0 2px 2px rgb(255 255 255 / 0.18), inset 0 -2px 3px rgb(0 0 0 / 0.45);
}
.ac-rim--thin { --_w: 3px; }
.ac-rim--thick { --_w: 10px; }
.ac-rim--brass { background: conic-gradient(from 210deg, var(--brass), var(--line) 22%, var(--steel-deep) 45%, var(--line) 65%, var(--brass) 82%, var(--steel-deep) 95%, var(--brass)); }
/* ---------- ac-plate: chamfered-corner panel with a thin glowing edge ----------
Cut corners top-left and bottom-right (the folder icons). ac-plate--quad cuts all four. Put content straight inside.
clip-path clips shadows: to make a plate glow, wrap it in a box with ac-glow-halo-1/2/3. */
.ac-plate {
--_c: var(--chamfer);
position: relative; isolation: isolate; box-sizing: border-box; padding: var(--space-6); color: var(--ink);
background: var(--plate-edge);
clip-path: polygon(var(--_c) 0, 100% 0, 100% calc(100% - var(--_c)), calc(100% - var(--_c)) 100%, 0 100%, 0 var(--_c));
}
.ac-plate::before { /* the face, one pixel in, so the edge colour shows as a hairline */
content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--plate-fill);
clip-path: polygon(calc(var(--_c) - 0.4px) 0, 100% 0, 100% calc(100% - var(--_c) + 0.4px), calc(100% - var(--_c) + 0.4px) 100%, 0 100%, 0 calc(var(--_c) - 0.4px));
}
.ac-plate::after { /* a brighter edge across each cut corner */
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
linear-gradient(45deg, transparent calc(50% - 1px), var(--glow) calc(50% - 1px), var(--glow) calc(50% + 1px), transparent calc(50% + 1px)) 0 0 / var(--_c) var(--_c) no-repeat,
linear-gradient(45deg, transparent calc(50% - 1px), var(--glow) calc(50% - 1px), var(--glow) calc(50% + 1px), transparent calc(50% + 1px)) 100% 100% / var(--_c) var(--_c) no-repeat;
}
.ac-plate--quad {
clip-path: polygon(var(--_c) 0, calc(100% - var(--_c)) 0, 100% var(--_c), 100% calc(100% - var(--_c)), calc(100% - var(--_c)) 100%, var(--_c) 100%, 0 calc(100% - var(--_c)), 0 var(--_c));
}
.ac-plate--quad::before {
clip-path: polygon(calc(var(--_c) - 0.4px) 0, calc(100% - var(--_c) + 0.4px) 0, 100% calc(var(--_c) - 0.4px), 100% calc(100% - var(--_c) + 0.4px), calc(100% - var(--_c) + 0.4px) 100%, calc(var(--_c) - 0.4px) 100%, 0 calc(100% - var(--_c) + 0.4px), 0 calc(var(--_c) - 0.4px));
}
.ac-plate--quad::after {
background:
linear-gradient(45deg, transparent calc(50% - 1px), var(--glow) calc(50% - 1px), var(--glow) calc(50% + 1px), transparent calc(50% + 1px)) 0 0 / var(--_c) var(--_c) no-repeat,
linear-gradient(45deg, transparent calc(50% - 1px), var(--glow) calc(50% - 1px), var(--glow) calc(50% + 1px), transparent calc(50% + 1px)) 100% 100% / var(--_c) var(--_c) no-repeat,
linear-gradient(135deg, transparent calc(50% - 1px), var(--glow) calc(50% - 1px), var(--glow) calc(50% + 1px), transparent calc(50% + 1px)) 100% 0 / var(--_c) var(--_c) no-repeat,
linear-gradient(135deg, transparent calc(50% - 1px), var(--glow) calc(50% - 1px), var(--glow) calc(50% + 1px), transparent calc(50% + 1px)) 0 100% / var(--_c) var(--_c) no-repeat;
}
.ac-plate--sm { --_c: 8px; padding: var(--space-3); }
.ac-plate--lg { --_c: 22px; padding: var(--space-8); }
/* ---------- ac-trace: circuit-trace divider, solder pads at both ends, one 45-degree bend ----------
Modifiers: ac-trace--flat (no bend), ac-trace--lit (glow colour + halo),
ac-trace--live (a spark runs along it; motion only if allowed). Set --ac-trace-c to recolour. Pure CSS, scales to any width. */
.ac-trace {
--_c: var(--ac-trace-c, var(--circuit)); --_t: var(--trace-width);
position: relative; height: 16px; width: 100%; margin: var(--space-3) 0;
background:
radial-gradient(circle at 5px 4px, transparent 0 1.5px, var(--_c) 2px 4.5px, transparent 5px) 0 0 / 10px 16px no-repeat,
radial-gradient(circle at 5px 12px, transparent 0 1.5px, var(--_c) 2px 4.5px, transparent 5px) 100% 0 / 10px 16px no-repeat,
linear-gradient(var(--_c), var(--_c)) 8px 3px / calc(50% - 13px) var(--_t) no-repeat,
linear-gradient(45deg, transparent calc(50% - var(--_t) / 2), var(--_c) calc(50% - var(--_t) / 2), var(--_c) calc(50% + var(--_t) / 2), transparent calc(50% + var(--_t) / 2)) 50% 3px / 10px 10px no-repeat,
linear-gradient(var(--_c), var(--_c)) calc(100% - 8px) 11px / calc(50% - 13px) var(--_t) no-repeat;
}
.ac-trace--flat {
height: 10px;
background:
radial-gradient(circle at 5px 5px, transparent 0 1.5px, var(--_c) 2px 4.5px, transparent 5px) 0 0 / 10px 10px no-repeat,
radial-gradient(circle at 5px 5px, transparent 0 1.5px, var(--_c) 2px 4.5px, transparent 5px) 100% 0 / 10px 10px no-repeat,
linear-gradient(var(--_c), var(--_c)) 8px 4px / calc(100% - 16px) var(--_t) no-repeat;
}
.ac-trace--lit { --ac-trace-c: var(--glow); filter: drop-shadow(0 0 4px rgb(var(--glow-rgb) / 0.6)); }
.ac-trace--live::after { content: ""; position: absolute; top: 1px; left: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--lightning); box-shadow: var(--glow-strong); opacity: 0.9; }
.ac-pad { /* a single solder pad: use as a bullet, a node on a diagram, a list marker */
display: inline-block; width: var(--pad-size); height: var(--pad-size); box-sizing: border-box; vertical-align: middle;
border: 2px solid var(--ac-trace-c, var(--circuit)); border-radius: 50%; background: transparent;
}
.ac-pad--lit { border-color: var(--glow); box-shadow: var(--glow-soft); }
/* ---------- ac-glow: light levels ----------
ac-glow-1/2/3: box-shadow glow on a plain box (soft, strong, strongest). ac-glow-halo-1/2/3: the same as a drop-shadow, which follows
an element's real outline, including clip-path children: put it on a wrapper. ac-glow-text-1/2: text-shadow for a heading (dark theme;
on vellum it falls back to a faint shadow). Level 3 is for the single focus of a view. */
.ac-glow-1 { box-shadow: var(--glow-soft); }
.ac-glow-2 { box-shadow: var(--glow-rune); }
.ac-glow-3 { box-shadow: var(--glow-strong); }
.ac-glow-halo-1 { filter: drop-shadow(0 0 6px rgb(var(--glow-rgb) / 0.3)); }
.ac-glow-halo-2 { filter: drop-shadow(0 0 8px rgb(var(--glow-rgb) / 0.5)); }
.ac-glow-halo-3 { filter: drop-shadow(0 0 4px rgb(var(--glow-rgb) / 0.7)) drop-shadow(0 0 18px rgb(var(--glow-rgb) / 0.45)); }
.ac-glow-text-1 { text-shadow: 0 0 10px rgb(var(--glow-rgb) / 0.35); }
.ac-glow-text-2 { text-shadow: 0 0 4px rgb(var(--glow-rgb) / 0.6), 0 0 16px rgb(var(--glow-rgb) / 0.4); }
/* ---------- ac-runes: a band of Elder Futhark, decorative ----------
or put your own runes in the element's text (always aria-hidden).
ac-runes--band: ruled above and below, faded at the ends. ac-runes--lit: glowing. Never carry meaning in runes. */
.ac-runes {
font: var(--text-rune); font-size: 15px; color: var(--steel-light); letter-spacing: 0.7em; white-space: nowrap; overflow: hidden;
user-select: none; pointer-events: none; text-align: center; text-transform: none;
}
.ac-runes--futhark::before {
content: "ᚠᚢᚦᚨᚱᚲᚷᚹᚺᚾᛁᛃᛇᛈᛉᛊᛏᛒᛖᛗᛚᛜᛞᛟ";
content: "ᚠᚢᚦᚨᚱᚲᚷᚹᚺᚾᛁᛃᛇᛈᛉᛊᛏᛒᛖᛗᛚᛜᛞᛟ" / ""; /* empty alt text where supported, so screen readers skip it */
}
.ac-runes--band { padding: var(--space-2) 0; border-block: 1px solid var(--line-subtle); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ac-runes--lit { color: var(--glow); text-shadow: 0 0 6px rgb(var(--glow-rgb) / 0.6); }
svg text.ac-runes-ring { font-family: var(--font-rune); fill: var(--steel-light); letter-spacing: 0.35em; user-select: none; } /* for a ring: ... 