/* Theme parts: card frames. A card (KitCard, LinkCard, the wiki's category cards) takes three parts:
   [data-frame-marks]   what is drawn on the card (ThemeMarks):
                          --card-marks                gradient layers over the surface, as a background list
                          --card-mask-<colour>        a drawing filled with that colour (text, accent, accent-2,
                                                      accent-3 or border), as a mask shorthand list
                          --card-ink-<colour>         the colour itself, to make it fainter
   [data-frame-edge]    its border: --card-border-style and --card-border-width
   [data-frame-shadow]  its shadow: --card-shadow
   Drawings are black on clear; every colour comes from the theme. */

[data-frame-edge="line"] { --card-border-style: solid; --card-border-width: 1px; }
[data-frame-edge="thick"] { --card-border-style: solid; --card-border-width: 2px; }
[data-frame-edge="heavy"] { --card-border-style: solid; --card-border-width: 3px; }
[data-frame-edge="double"] { --card-border-style: double; --card-border-width: 3px; }
[data-frame-edge="outset"] { --card-border-style: outset; --card-border-width: 3px; }
[data-frame-edge="none"] { --card-border-style: none; --card-border-width: 0px; }


/* A card keeps its whole shape unless its marks cut it (--card-clip), and its plain head unless its marks band it
   (--card-head-*); a preview inside the page starts uncut and unbanded, as do the sidebar's edge and the stat tiles. */
[data-frame-marks] {
	--card-clip: none;
	--card-head-bg: initial;
	--card-head-rule: initial;
	--card-head-radius: initial;
	--card-head-inset: initial;
	--card-head-bleed: initial;
	--card-head-ink: initial;
	--card-title-ink: initial;
	--card-title-shadow: initial;
	--card-title-plate: initial;
	--card-title-plate-pad: initial;
	--card-title-plate-shadow: initial;
	--card-title-plate-clip: initial;
	--rail-edge: initial;
	--tile-edge: initial;
	--tile-shadow: initial;
}
[data-frame-marks="none"] { --card-marks: none; }
[data-frame-shadow="none"] { --card-shadow: none; }

/* Filigree: a scrolled flourish in each corner. */
[data-frame-marks="filigree"] { --card-mask-accent: url(/themes/drawings/frames/filigree-accent.svg) 0 0 / 100% 100% no-repeat; }
/* Drip: drips running down from the top edge. */
[data-frame-marks="drip"] { --card-mask-accent: url(/themes/drawings/frames/drip-accent.svg) left top / 120px 14px repeat-x; }
/* Bar: a solid accent bar down the left side. */
[data-frame-marks="bar"] { --card-marks: linear-gradient(var(--accent), var(--accent)) left top / 5px 100% no-repeat; }

/* Glow: a faint accent ring and haze. */
[data-frame-shadow="glow"] { --card-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 14%, transparent); }
/* Inset: a second border line inside the first. */
[data-frame-shadow="inset"] { --card-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--border); }
/* Engraved: an inner rule in the text colour, as on an engraved plate. */
[data-frame-shadow="engraved"] { --card-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px color-mix(in srgb, var(--text) 45%, transparent); }
/* Drip: a faint accent haze. */
[data-frame-shadow="drip"] { --card-shadow: 0 0 18px color-mix(in srgb, var(--accent) 10%, transparent); }

/* Corners: accent ticks on a card's four corners. */
[data-frame-marks="corners"] {
	--card-marks: linear-gradient(var(--accent), var(--accent)) left 6px top 6px / 14px 2px no-repeat,
		linear-gradient(var(--accent), var(--accent)) left 6px top 6px / 2px 14px no-repeat,
		linear-gradient(var(--accent), var(--accent)) right 6px top 6px / 14px 2px no-repeat,
		linear-gradient(var(--accent), var(--accent)) right 6px top 6px / 2px 14px no-repeat,
		linear-gradient(var(--accent), var(--accent)) left 6px bottom 6px / 14px 2px no-repeat,
		linear-gradient(var(--accent), var(--accent)) left 6px bottom 6px / 2px 14px no-repeat,
		linear-gradient(var(--accent), var(--accent)) right 6px bottom 6px / 14px 2px no-repeat,
		linear-gradient(var(--accent), var(--accent)) right 6px bottom 6px / 2px 14px no-repeat;
}
/* Tape: a strip across each top corner in the second accent, as on a photograph pinned to a board. */
[data-frame-marks="tape"] {
	--card-mask-accent-2: url(/themes/drawings/frames/tape-left.svg) left 0 top 0 / 40px 40px no-repeat,
		url(/themes/drawings/frames/tape-right.svg) right 0 top 0 / 40px 40px no-repeat;
	--card-ink-accent-2: color-mix(in srgb, var(--accent-2) 45%, transparent);
}
[data-scheme="dark"][data-frame-marks="tape"] {
	--card-ink-accent-2: color-mix(in srgb, var(--accent-2) 28%, transparent);
}
/* Art deco: three stepped rules ending in diamonds, in the accent on each corner. */
[data-frame-marks="deco"] {
	--card-mask-accent: url(/themes/drawings/frames/deco-top-left.svg) left 3px top 3px / 28px 28px no-repeat,
		url(/themes/drawings/frames/deco-top-right.svg) right 3px top 3px / 28px 28px no-repeat,
		url(/themes/drawings/frames/deco-bottom-right.svg) right 3px bottom 3px / 28px 28px no-repeat,
		url(/themes/drawings/frames/deco-bottom-left.svg) left 3px bottom 3px / 28px 28px no-repeat;
}
/* Halo: a line of light along the top of a card, and a glow falling from it. */
[data-frame-marks="halo"] {
	--card-marks: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 70%, transparent), transparent) center top / 60% 2px no-repeat,
		radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
}
/* Scallop: lace scallops along the top and bottom edges, with a dot under each top one. */
[data-frame-marks="scallop"] {
	--card-marks: radial-gradient(circle at 9px -2px, transparent 0 7px, color-mix(in srgb, var(--accent) 45%, transparent) 7.5px 8.5px, transparent 9px) left top / 18px 10px repeat-x,
		radial-gradient(circle at 9px 10px, color-mix(in srgb, var(--accent) 50%, transparent) 0 1.2px, transparent 1.8px) left top / 18px 14px repeat-x,
		radial-gradient(circle at 9px 12px, transparent 0 7px, color-mix(in srgb, var(--accent) 45%, transparent) 7.5px 8.5px, transparent 9px) left bottom / 18px 10px repeat-x;
}
/* Tape: the card lifted off the board. */
[data-frame-shadow="tape"] { --card-shadow: 0 6px 14px rgba(0,0,0,0.10); }
[data-scheme="dark"][data-frame-shadow="tape"] { --card-shadow: 0 8px 18px rgba(0,0,0,0.45); }
/* Deco: a faint accent rule outside the border. */
[data-frame-shadow="deco"] { --card-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); }
/* Halo: a soft accent glow below the card. */
[data-frame-shadow="halo"] { --card-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 12%, transparent); }
/* Scallop: a faint accent blush below the card. */
[data-frame-shadow="scallop"] { --card-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 10%, transparent); }
/* A ribbon bow tied at the top corner with a sparkle on its loop, over a pink-to-lavender hem. */
[data-frame-marks="ribbon"] {
	--card-marks: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 35%, transparent) 40%, color-mix(in srgb, var(--accent-2) 45%, transparent)) left bottom / 100% 3px no-repeat;
	--card-mask-accent: url(/themes/drawings/frames/ribbon-bow.svg) right 8px top 2px / 66px 30px no-repeat;
	--card-mask-accent-2: url(/themes/drawings/frames/ribbon-sparkle.svg) right 8px top 2px / 66px 30px no-repeat;
}
/* A soft accent halo round the card and a pink glow beneath. */
[data-frame-shadow="ribbon"] { --card-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent), 0 10px 24px color-mix(in srgb, var(--accent) 16%, transparent); }
/* Sprays of blossoms and leaves in three colours at the card's two right-hand corners. */
[data-frame-marks="bloom"] {
	--card-mask-accent: url(/themes/drawings/frames/bloom-accent.svg) right 2px top 2px / 40px 40px no-repeat, url(/themes/drawings/frames/bloom-turned-accent.svg) right 2px bottom 2px / 40px 40px no-repeat;
	--card-mask-accent-2: url(/themes/drawings/frames/bloom-accent-2.svg) right 2px top 2px / 40px 40px no-repeat, url(/themes/drawings/frames/bloom-turned-accent-2.svg) right 2px bottom 2px / 40px 40px no-repeat;
	--card-mask-accent-3: url(/themes/drawings/frames/bloom-turned-accent-3.svg) right 2px bottom 2px / 40px 40px no-repeat;
}
/* A faint, soft drop shadow. */
[data-frame-shadow="bloom"] { --card-shadow: 0 6px 20px color-mix(in srgb, var(--text) 7%, transparent); }
/* Rows of stage lights in three colours along the top and foot, light rising from the floor. */
[data-frame-marks="stage"] {
	--card-marks: linear-gradient(0deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent) left bottom / 100% 40% no-repeat;
	--card-mask-accent: url(/themes/drawings/frames/stage-bulb.svg) left 6px top 4px / 30px 10px repeat-x, url(/themes/drawings/frames/stage-bulb.svg) left 21px bottom 4px / 30px 10px repeat-x;
	--card-mask-accent-2: url(/themes/drawings/frames/stage-bulb.svg) left 16px top 4px / 30px 10px repeat-x, url(/themes/drawings/frames/stage-bulb.svg) left 31px bottom 4px / 30px 10px repeat-x;
	--card-mask-accent-3: url(/themes/drawings/frames/stage-bulb.svg) left 26px top 4px / 30px 10px repeat-x, url(/themes/drawings/frames/stage-bulb.svg) left 41px bottom 4px / 30px 10px repeat-x;
}
/* An accent rim glowing out into the dark, with a second colour far out. */
[data-frame-shadow="stage"] { --card-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 20px color-mix(in srgb, var(--accent) 28%, transparent), 0 0 44px color-mix(in srgb, var(--accent-2) 12%, transparent); }
/* Washi tape: a dotted strip across the top edge and a two-colour striped one across the corner below. */
[data-frame-marks="washi"] {
	--card-mask-accent-3: url(/themes/drawings/frames/washi-dotted.svg) center top / 96px 24px no-repeat;
	--card-mask-accent-2: url(/themes/drawings/frames/washi-stripes-a.svg) right bottom / 54px 54px no-repeat;
	--card-mask-border: url(/themes/drawings/frames/washi-stripes-b.svg) right bottom / 54px 54px no-repeat;
	--card-ink-border: color-mix(in srgb, var(--link-missing) 55%, var(--surface));
}
/* A card stuck to the page: a hairline and a warm, low shadow. */
[data-frame-shadow="washi"] { --card-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 6px 14px color-mix(in srgb, var(--text) 10%, transparent); }
/* The same card in the dark: a deeper shadow. */
[data-scheme="dark"][data-frame-shadow="washi"] { --card-shadow: 0 6px 16px rgba(0,0,0,0.4); }
/* A manga panel: screentone shading into the card's bottom right corner. */
[data-frame-marks="panel"] {
	--card-mask-text: url(/themes/drawings/frames/panel-tone.svg) right bottom / 140px 90px no-repeat;
}
/* A jersey's striped hem: an accent band along the foot, a pale stripe above it. */
[data-frame-marks="jersey"] {
	--card-marks: linear-gradient(var(--accent), var(--accent)) left bottom / 100% 4px no-repeat,
		linear-gradient(color-mix(in srgb, var(--text) 85%, transparent), color-mix(in srgb, var(--text) 85%, transparent)) left 0 bottom 6px / 100% 2px no-repeat;
}
/* An armour plate: two corners cut off and edged in the accent, the border drawn round the rest, a hazard-striped tab (accent-2) and rivets. */
[data-frame-marks="chamfer"] {
	--card-marks: linear-gradient(135deg, var(--bg) 0 calc(50% - 1px), var(--accent) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) left top / 20px 20px no-repeat,
		linear-gradient(315deg, var(--bg) 0 calc(50% - 1px), var(--accent) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) right bottom / 20px 20px no-repeat,
		linear-gradient(var(--border), var(--border)) right top / calc(100% - 19px) 1px no-repeat,
		linear-gradient(var(--border), var(--border)) right top / 1px calc(100% - 19px) no-repeat,
		linear-gradient(var(--border), var(--border)) left bottom / calc(100% - 19px) 1px no-repeat,
		linear-gradient(var(--border), var(--border)) left bottom / 1px calc(100% - 19px) no-repeat,
		repeating-linear-gradient(-45deg, var(--accent-2) 0 5px, rgba(0, 0, 0, 0.9) 5px 10px) right 30px bottom 5px / 56px 6px no-repeat,
		radial-gradient(circle, color-mix(in srgb, var(--text) 40%, transparent) 0 1.5px, transparent 2px) right 5px top 5px / 6px 6px no-repeat,
		radial-gradient(circle, color-mix(in srgb, var(--text) 40%, transparent) 0 1.5px, transparent 2px) left 5px bottom 5px / 6px 6px no-repeat;
	/* The card itself is cut at those corners, so neither its surface nor the highlight's line squares them off. */
	--card-clip: polygon(18.5px 0, 100% 0, 100% calc(100% - 18.5px), calc(100% - 18.5px) 100%, 0 100%, 0 18.5px);
}
/* A game's status window: a lit band at the top, a diamond in each corner. */
[data-frame-marks="status"] {
	--card-marks: linear-gradient(180deg, color-mix(in srgb, var(--border) 40%, transparent), transparent) left top / 100% 44px no-repeat;
	--card-mask-accent: url(/themes/drawings/frames/status-diamond.svg) left 3px top 3px / 12px 12px no-repeat,
		url(/themes/drawings/frames/status-diamond.svg) right 3px top 3px / 12px 12px no-repeat,
		url(/themes/drawings/frames/status-diamond.svg) right 3px bottom 3px / 12px 12px no-repeat,
		url(/themes/drawings/frames/status-diamond.svg) left 3px bottom 3px / 12px 12px no-repeat;
}
/* Shoji: lattice in the corners, and a seal stamped in the bottom right, its carving in accent-2 (cut out of the seal, which is drawn above it). */
[data-frame-marks="shoji"] {
	--card-mask-text: url(/themes/drawings/frames/shoji-kumiko.svg) 0 0 / 100% 100% no-repeat;
	--card-mask-accent: url(/themes/drawings/frames/shoji-seal.svg) right 10px bottom 10px / 18px 18px no-repeat;
	--card-mask-accent-2: url(/themes/drawings/frames/shoji-seal-carving.svg) right 10px bottom 10px / 18px 18px no-repeat;
}

/* A jersey card lifted off the floor. */
[data-frame-shadow="jersey"] { --card-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); }
/* A status window's glow in the border colour. */
[data-frame-shadow="status"] {
	--card-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 35%, transparent), 0 0 18px color-mix(in srgb, var(--border) 40%, transparent);
}
/* A shoji frame's inner rule and a faint lantern glow. */
[data-frame-shadow="shoji"] {
	--card-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px color-mix(in srgb, var(--text) 14%, transparent), 0 0 26px color-mix(in srgb, var(--accent) 7%, transparent);
}
/* Inked: an accent-2 caption box ruled off in ink behind the heading, and a halftone swelling to the far corner. */
[data-frame-marks="inked"] {
	--card-marks: linear-gradient(var(--text), var(--text)) left 0 top 31px / 186px 3px no-repeat,
		linear-gradient(var(--text), var(--text)) left 183px top 0 / 3px 34px no-repeat,
		linear-gradient(var(--accent-2), var(--accent-2)) left top / 186px 34px no-repeat;
	--card-mask-accent: url(/themes/drawings/frames/inked-halftone.svg) right 0 bottom 0 / 96px 64px no-repeat;
}
/* Inked: a hard ink shadow. */
[data-frame-shadow="inked"] { --card-shadow: 6px 6px 0 var(--text); }
/* Title card: a vignette darkening toward the card's edges. */
[data-frame-marks="titlecard"] {
	--card-marks: radial-gradient(ellipse at 50% 45%, transparent 55%, color-mix(in srgb, var(--text) 13%, transparent) 100%);
}
/* Title card: an inner ink rule inset from the border, and a soft drop. */
[data-frame-shadow="titlecard"] {
	--card-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 6px var(--text), 0 3px 0 color-mix(in srgb, var(--text) 25%, transparent);
}
/* Chunky: a plastic sheen across the top. */
[data-frame-marks="chunky"] { --card-marks: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0) 38%); }
/* Chunky: a lit top edge and a hard accent-2 shadow. */
[data-frame-shadow="chunky"] { --card-shadow: inset 0 3px 0 rgba(255,255,255,0.10), 6px 7px 0 var(--accent-2); }
/* Plating: an armour plate with corners cut on the bevel, an engraved panel line inside the edge, part-number ticks,
   an accent tab with an accent-2 stripe, an accent-2 chin plate and accent-3 vents. */
[data-frame-marks="plating"] {
	--card-marks: linear-gradient(90deg, color-mix(in srgb, var(--text) 30%, transparent) 0 3px, transparent 3px 4px,
			color-mix(in srgb, var(--text) 30%, transparent) 4px 5px, transparent 5px 6px, color-mix(in srgb, var(--text) 30%, transparent) 6px 7px,
			transparent 7px 8px, color-mix(in srgb, var(--text) 30%, transparent) 8px 11px, transparent 11px 12px,
			color-mix(in srgb, var(--text) 30%, transparent) 12px 13px, transparent 13px 14px, color-mix(in srgb, var(--text) 30%, transparent) 14px 15px,
			transparent 15px 18px, color-mix(in srgb, var(--text) 30%, transparent) 18px 21px, transparent 21px 22px,
			color-mix(in srgb, var(--text) 30%, transparent) 22px 23px, transparent 23px) right 46px bottom 12px / 26px 5px no-repeat,
		linear-gradient(225deg, transparent calc(50% - 0.7px), var(--border) 0 calc(50% + 0.7px), transparent 0) right top / 18px 18px no-repeat,
		linear-gradient(225deg, transparent calc(50% - 0.5px), color-mix(in srgb, var(--border) 75%, transparent) 0 calc(50% + 0.5px), transparent 0) right 5px top 5px / 15.1px 15.1px no-repeat,
		linear-gradient(45deg, transparent calc(50% - 0.7px), var(--border) 0 calc(50% + 0.7px), transparent 0) left bottom / 18px 18px no-repeat,
		linear-gradient(45deg, transparent calc(50% - 0.5px), color-mix(in srgb, var(--border) 75%, transparent) 0 calc(50% + 0.5px), transparent 0) left 5px bottom 5px / 15.1px 15.1px no-repeat,
		linear-gradient(225deg, var(--bg) 0 50%, transparent 50%) right top / 18px 18px no-repeat,
		linear-gradient(45deg, var(--bg) 0 50%, transparent 50%) left bottom / 18px 18px no-repeat,
		linear-gradient(var(--border), var(--border)) left top / calc(100% - 18px) 1px no-repeat,
		linear-gradient(var(--border), var(--border)) right bottom / 1px calc(100% - 18px) no-repeat,
		linear-gradient(var(--border), var(--border)) right bottom / calc(100% - 18px) 2px no-repeat,
		linear-gradient(var(--border), var(--border)) left top / 1px calc(100% - 18px) no-repeat,
		linear-gradient(color-mix(in srgb, var(--border) 75%, transparent), color-mix(in srgb, var(--border) 75%, transparent)) left 5px top 5px / calc(100% - 25px) 1px no-repeat,
		linear-gradient(color-mix(in srgb, var(--border) 75%, transparent), color-mix(in srgb, var(--border) 75%, transparent)) left 5px top 5px / 1px calc(100% - 25px) no-repeat,
		linear-gradient(color-mix(in srgb, var(--border) 75%, transparent), color-mix(in srgb, var(--border) 75%, transparent)) right 5px bottom 6px / calc(100% - 25px) 1px no-repeat,
		linear-gradient(color-mix(in srgb, var(--border) 75%, transparent), color-mix(in srgb, var(--border) 75%, transparent)) right 5px bottom 6px / 1px calc(100% - 26px) no-repeat,
		linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--border) 20%, transparent)) 0 0 / 100% 100% no-repeat;
	--card-mask-accent: url(/themes/drawings/frames/plating-tab.svg) left 14px top 0 / 66px 6px no-repeat;
	--card-mask-accent-2: url(/themes/drawings/frames/plating-tab-stripe.svg) left 14px top 0 / 66px 6px no-repeat,
		url(/themes/drawings/frames/plating-chin.svg) center bottom / 34px 5px no-repeat;
	--card-mask-accent-3: url(/themes/drawings/frames/plating-vents.svg) right 14px bottom 10px / 24px 9px no-repeat;
	--card-mask-text: url(/themes/drawings/frames/plating-vents-edge.svg) right 14px bottom 10px / 24px 9px no-repeat;
}
/* Chrome armour: accent rivets in the corners, a chrome trim along the top over an accent-3 band, accent-3 side plates
   scorched toward the edge, an accent-3 chevron edged in the accent, and a sheen falling off into shadow. */
[data-frame-marks="chrome-armor"] {
	--chrome-armor-ember: color-mix(in srgb, var(--accent-3) 56%, #000);
	--card-marks: radial-gradient(circle at 7.1px 7.1px, rgba(255,255,255,0.9) 0.9px, rgba(255,255,255,0) 1.3px) left 3px top 3px / 16px 16px no-repeat,
		radial-gradient(circle at 8.9px 7.1px, rgba(255,255,255,0.9) 0.9px, rgba(255,255,255,0) 1.3px) right 3px top 3px / 16px 16px no-repeat,
		radial-gradient(circle at 8.9px 8.9px, rgba(255,255,255,0.9) 0.9px, rgba(255,255,255,0) 1.3px) right 3px bottom 3px / 16px 16px no-repeat,
		radial-gradient(circle at 7.1px 8.9px, rgba(255,255,255,0.9) 0.9px, rgba(255,255,255,0) 1.3px) left 3px bottom 3px / 16px 16px no-repeat,
		radial-gradient(circle at 8px 8px, var(--accent) 2.4px, rgba(0,0,0,0.6) 2.8px 3.2px, rgba(0,0,0,0) 3.6px) left 3px top 3px / 16px 16px no-repeat,
		radial-gradient(circle at 8px 8px, var(--accent) 2.4px, rgba(0,0,0,0.6) 2.8px 3.2px, rgba(0,0,0,0) 3.6px) right 3px top 3px / 16px 16px no-repeat,
		radial-gradient(circle at 8px 8px, var(--accent) 2.4px, rgba(0,0,0,0.6) 2.8px 3.2px, rgba(0,0,0,0) 3.6px) right 3px bottom 3px / 16px 16px no-repeat,
		radial-gradient(circle at 8px 8px, var(--accent) 2.4px, rgba(0,0,0,0.6) 2.8px 3.2px, rgba(0,0,0,0) 3.6px) left 3px bottom 3px / 16px 16px no-repeat,
		linear-gradient(180deg, #fff, color-mix(in srgb, var(--border) 50%, #fff) 30%, color-mix(in srgb, var(--border) 67%, #000) 55%,
			color-mix(in srgb, var(--border) 32%, #fff) 80%, var(--border)) left top / 100% 6px no-repeat,
		linear-gradient(var(--accent-3), var(--chrome-armor-ember)) left 0 top 6px / 100% 4px no-repeat,
		linear-gradient(90deg, var(--chrome-armor-ember), var(--accent-3)) left top / 5px 100% no-repeat,
		linear-gradient(270deg, var(--chrome-armor-ember), var(--accent-3)) right top / 5px 100% no-repeat,
		linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 30%, rgba(0,0,0,0.28)) 0 0 / 100% 100% no-repeat;
	--card-mask-accent-3: url(/themes/drawings/frames/chrome-armor-chevron.svg) right 24px top 10px / 46px 17px no-repeat;
	--card-mask-accent: url(/themes/drawings/frames/chrome-armor-chevron-edge.svg) right 24px top 10px / 46px 17px no-repeat;
}
/* Chrome armour: a lit top edge and shadowed foot, a hard black drop, a deep shadow and an accent-3 glow. */
[data-frame-shadow="chrome-armor"] {
	--card-shadow: inset 0 2px 0 rgba(255,255,255,0.22), inset 0 -3px 0 rgba(0,0,0,0.5), 0 5px 0 color-mix(in srgb, var(--accent-3) 2%, #000),
		0 14px 30px rgba(0,0,0,0.7), 0 0 22px color-mix(in srgb, var(--accent-3) 18%, transparent);
}
/* Cyberpunk: two corners cut on the diagonal in the accent and accent-2, edges fading to the border, a glitch on the right. */
[data-frame-marks="glitch"] {
	--card-marks: linear-gradient(225deg, var(--bg) 0 11.3px, var(--accent) 11.3px 13px, transparent 13px) right top / 28px 28px no-repeat,
		linear-gradient(45deg, var(--bg) 0 11.3px, var(--accent-2) 11.3px 13px, transparent 13px) left bottom / 28px 28px no-repeat,
		linear-gradient(90deg, var(--accent), var(--accent)) left top / 34% 2px no-repeat,
		linear-gradient(90deg, var(--accent), var(--border) 60%) left top / calc(100% - 16px) 1px no-repeat,
		linear-gradient(180deg, var(--accent), var(--border) 50%) left top / 1px calc(100% - 16px) no-repeat,
		linear-gradient(var(--border), var(--border)) right bottom / 1px calc(100% - 16px) no-repeat,
		linear-gradient(90deg, var(--accent-2), var(--border) 40%) right bottom / calc(100% - 16px) 1px no-repeat,
		linear-gradient(color-mix(in srgb, var(--accent-2) 90%, transparent), color-mix(in srgb, var(--accent-2) 90%, transparent)) right 0 top 74% / 3px 11px no-repeat,
		linear-gradient(color-mix(in srgb, var(--accent) 90%, transparent), color-mix(in srgb, var(--accent) 90%, transparent)) right 4px top calc(74% + 14px) / 12px 2px no-repeat;
}

/* The glitch's split: the card's edge offset in accent-2 and the accent, in a faint glow. */
[data-frame-shadow="glitch"] {
	--card-shadow: -3px 0 0 -1px color-mix(in srgb, var(--accent-2) 30%, transparent), 3px 0 0 -1px color-mix(in srgb, var(--accent) 30%, transparent),
		0 0 26px color-mix(in srgb, var(--accent) 10%, transparent);
}

/* A neon tube's inner light: the accent from the top, accent-3 from the bottom. */
[data-frame-marks="neon"] {
	--card-marks: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 38%),
		linear-gradient(0deg, color-mix(in srgb, var(--accent-3) 8%, transparent), transparent 30%);
}

/* A neon tube's glow round the card, inside and out. */
[data-frame-shadow="neon"] {
	--card-shadow: 0 0 0 1px var(--accent), 0 0 7px 1px color-mix(in srgb, var(--accent) 75%, transparent),
		0 0 24px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 0 14px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* A worn hull plate: a bevel, rivets in the corners (discs in a grey between text and border, a glint, a dark rim),
   a brushed grain, dark stains and a painted tab in the accent. The rim and the stains are black, on the accent-2
   and accent-3 layers, which the plate draws nothing else on. */
[data-frame-marks="hull"] {
	--card-marks: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 35%, rgba(0,0,0,0.22)) 0 0 / 100% 100% no-repeat;
	--card-mask-border: url(/themes/drawings/frames/hull-rivet.svg) left 3px top 3px / 16px 16px no-repeat,
		url(/themes/drawings/frames/hull-rivet.svg) right 3px top 3px / 16px 16px no-repeat,
		url(/themes/drawings/frames/hull-rivet.svg) right 3px bottom 3px / 16px 16px no-repeat,
		url(/themes/drawings/frames/hull-rivet.svg) left 3px bottom 3px / 16px 16px no-repeat;
	--card-ink-border: color-mix(in srgb, var(--text) 20%, var(--border));
	--card-mask-text: url(/themes/drawings/frames/hull-rivet-glint.svg) left 3px top 3px / 16px 16px no-repeat,
		url(/themes/drawings/frames/hull-rivet-glint.svg) right 3px top 3px / 16px 16px no-repeat,
		url(/themes/drawings/frames/hull-rivet-glint.svg) right 3px bottom 3px / 16px 16px no-repeat,
		url(/themes/drawings/frames/hull-rivet-glint.svg) left 3px bottom 3px / 16px 16px no-repeat,
		url(/themes/drawings/frames/hull-brushed.svg) 0 0 / 300px 300px;
	--card-mask-accent-2: url(/themes/drawings/frames/hull-rivet-rim.svg) left 3px top 3px / 16px 16px no-repeat,
		url(/themes/drawings/frames/hull-rivet-rim.svg) right 3px top 3px / 16px 16px no-repeat,
		url(/themes/drawings/frames/hull-rivet-rim.svg) right 3px bottom 3px / 16px 16px no-repeat,
		url(/themes/drawings/frames/hull-rivet-rim.svg) left 3px bottom 3px / 16px 16px no-repeat;
	--card-ink-accent-2: rgba(0,0,0,0.55);
	--card-mask-accent-3: url(/themes/drawings/shared/clouds-360.svg) 0 0 / 360px 360px;
	--card-ink-accent-3: rgba(0,0,0,0.35);
	--card-mask-accent: linear-gradient(#000, #000) left 22px top 0 / 40px 3px no-repeat;
}

/* A hull plate's bevel and the shadow it casts. */
[data-frame-shadow="hull"] {
	--card-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -2px 0 rgba(0,0,0,0.45), 0 8px 20px rgba(0,0,0,0.55);
}

/* A console card: an accent elbow round the top-left corner, carried on as bars along the top (accent, accent-2,
   peach: warn mixed with link-missing) and down the left (accent, accent-3). */
[data-frame-marks="elbow"] {
	--card-marks: linear-gradient(var(--accent), var(--accent)) left 60px top 0 / calc(55% - 60px) 8px no-repeat,
		linear-gradient(var(--accent-2), var(--accent-2)) right 64px top 0 / calc(45% - 72px) 8px no-repeat,
		linear-gradient(color-mix(in srgb, var(--warn), var(--link-missing)), color-mix(in srgb, var(--warn), var(--link-missing))) right 0 top 0 / 56px 8px no-repeat,
		linear-gradient(var(--accent), var(--accent)) left 0 top 60px / 8px max(0px, calc(100% - 94px)) no-repeat,
		linear-gradient(var(--accent-3), var(--accent-3)) left 0 bottom 0 / 8px 30px no-repeat;
	--card-mask-accent: url(/themes/drawings/frames/elbow-accent.svg) left top / 60px 60px no-repeat;
}
/* Lifted: cards stand off the page on the theme's elevation shadow (--elev-1, tokens.css); the
   Home hero catches a glow of the accent and the warning colour. */
[data-frame-marks="lifted"] {
	--hero-marks: radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%),
		radial-gradient(70% 120% at 100% 100%, color-mix(in srgb, var(--warn) 8%, transparent), transparent 60%);
}
[data-frame-shadow="lifted"] {
	--card-shadow: var(--elev-1);
}

/* Stained: a fine gold line along the top in the accent, fading at its ends, a glow falling from it, and a small
   crown in the accent in the lower right. */
[data-frame-marks="stained"] {
	--card-marks: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 70%, transparent) 20% 80%, transparent) left top / 100% 2px no-repeat,
		radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 60%);
	--card-mask-accent: url(/themes/drawings/frames/stained-crown.svg) right 12px bottom 6px / 20px 12px no-repeat;
	--card-ink-accent: color-mix(in srgb, var(--accent) 70%, transparent);
}
/* Stained: a gold ring outside the border and an accent-2 glow. */
[data-frame-shadow="stained"] {
	--card-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 20px color-mix(in srgb, var(--accent-2) 16%, transparent);
}

/* Prism: glass lit from above, a bright line along the top, a cut gem in the accent at the top centre, and thin
   accent brackets in the top left and lower right corners, as on a modern menu window. */
[data-frame-marks="prism"] {
	--card-marks: linear-gradient(var(--accent), var(--accent)) left 6px top 6px / 16px 1px no-repeat,
		linear-gradient(var(--accent), var(--accent)) left 6px top 6px / 1px 16px no-repeat,
		linear-gradient(var(--accent), var(--accent)) right 6px bottom 6px / 16px 1px no-repeat,
		linear-gradient(var(--accent), var(--accent)) right 6px bottom 6px / 1px 16px no-repeat,
		linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-2) 70%, transparent), transparent) center top / 80% 1px no-repeat,
		linear-gradient(160deg, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 40%, color-mix(in srgb, var(--accent-3) 6%, transparent));
	--card-mask-accent: url(/themes/drawings/frames/prism-gem.svg) center top 2px / 10px 10px no-repeat;
}
/* Prism: a cold glow and a soft drop. */
[data-frame-shadow="prism"] {
	--card-shadow: 0 0 18px color-mix(in srgb, var(--accent) 12%, transparent), 0 10px 24px rgba(0,0,0,0.45);
}

/* Window: a 16-bit menu window, accent-2 at the top fading into the surface, with a pixel pointing glove in the
   lower right: white, shaded in accent-3 and a darker accent-3, outlined in black. Drawn on a 20 by 12 grid at two
   pixels a cell, so it stays sharp. */
[data-frame-marks="window"] {
	--card-marks: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 28%, transparent), transparent 70%);
	--card-mask-text: url(/themes/drawings/frames/window-glove.svg) right 6px bottom 4px / 40px 24px no-repeat;
	--card-ink-text: var(--text);
	--card-mask-accent-3: url(/themes/drawings/frames/window-glove-shade.svg) right 6px bottom 4px / 40px 24px no-repeat;
	--card-mask-accent-2: url(/themes/drawings/frames/window-glove-shadow.svg) right 6px bottom 4px / 40px 24px no-repeat;
	--card-ink-accent-2: color-mix(in srgb, var(--accent-3) 55%, #000);
	--card-mask-border: url(/themes/drawings/frames/window-glove-outline.svg) right 6px bottom 4px / 40px 24px no-repeat;
	--card-ink-border: #000;
}
/* Window: a black ring outside the white border and an accent-3 bevel inside it. */
[data-frame-shadow="window"] {
	--card-shadow: 0 0 0 2px #000, inset 0 0 0 1px var(--accent-3), inset 0 2px 0 1px rgba(255,255,255,0.25);
}

/* Torn: an accent triangle cut into the lower right corner and a slanted accent-2 stripe through the top right
   one; the rest of the card stays plain black, so its text reads cleanly. */
[data-frame-marks="torn"] {
	--card-marks: linear-gradient(135deg, transparent 50%, var(--accent) 50%) right bottom / 30px 30px no-repeat,
		linear-gradient(60deg, transparent 0 calc(100% - 46px), var(--accent-2) calc(100% - 46px) calc(100% - 41px), transparent calc(100% - 41px) calc(100% - 34px),
			var(--accent) calc(100% - 34px) calc(100% - 27px), transparent calc(100% - 27px)) right top / 80px 50px no-repeat;
}
/* Torn: a black card in a white outline, thrown on the table over a hard accent block. */
[data-frame-shadow="torn"] {
	--card-shadow: 0 0 0 2px var(--accent-2), 6px 6px 0 2px var(--accent);
}


/* Dialog: a menu panel of tinted glass, lit from the top in accent-2 with a sheen across it, a gold diamond at
   each corner and a small accent arrow at the foot, as when more text waits. */
[data-frame-marks="dialog"] {
	--card-marks: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 55%),
		linear-gradient(115deg, transparent 0 30%, color-mix(in srgb, var(--text) 5%, transparent) 30% 42%, transparent 42%);
	--card-mask-accent: url(/themes/drawings/frames/dialog-arrow.svg) center bottom 6px / 12px 7px no-repeat,
		url(/themes/drawings/frames/dialog-diamond.svg) left 3px top 3px / 10px 10px no-repeat,
		url(/themes/drawings/frames/dialog-diamond.svg) right 3px top 3px / 10px 10px no-repeat,
		url(/themes/drawings/frames/dialog-diamond.svg) left 3px bottom 3px / 10px 10px no-repeat,
		url(/themes/drawings/frames/dialog-diamond.svg) right 3px bottom 3px / 10px 10px no-repeat;
}
/* Dialog: a fine gold line inside the border, a dark gap between them, a black ring outside and a soft drop. */
[data-frame-shadow="dialog"] {
	--card-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 0 1px #000, 0 10px 24px rgba(0, 0, 0, 0.45);
}


/* Stat block: bars of accent-3 across the top and foot of the card. */
[data-frame-marks="statblock"] {
	--card-marks: linear-gradient(var(--accent-3), var(--accent-3)) left top / 100% 5px no-repeat,
		linear-gradient(var(--accent-3), var(--accent-3)) left bottom / 100% 5px no-repeat;
}
/* Stat block: a soft paper shadow. */
[data-frame-shadow="statblock"] {
	--card-shadow: 0 2px 8px color-mix(in srgb, var(--text) 18%, transparent);
}

/* Ledger: a head band in the accent lined in accent-2, a trait tab in accent-3, and a heavy rule at the foot. */
[data-frame-marks="ledger"] {
	--card-marks: linear-gradient(var(--accent), var(--accent)) left top / 100% 6px no-repeat,
		linear-gradient(var(--accent-2), var(--accent-2)) left 0 top 6px / 100% 2px no-repeat,
		linear-gradient(var(--text), var(--text)) left bottom / 100% 3px no-repeat;
	--card-mask-accent-3: url(/themes/drawings/frames/ledger-trait.svg) right 12px bottom 4px / 40px 9px no-repeat;
}
/* Ledger: a slight lift off the page. */
[data-frame-shadow="ledger"] {
	--card-shadow: 0 1px 3px color-mix(in srgb, var(--text) 22%, transparent);
}

/* Talon: three claw marks raked across the top right corner in the accent. */
[data-frame-marks="talon"] {
	--card-mask-accent: url(/themes/drawings/frames/talon-scratch.svg) right 10px top 8px / 42px 28px no-repeat;
	--card-ink-accent: color-mix(in srgb, var(--accent) 70%, transparent);
}
/* Talon: a black ring and a deep shadow, as if the card hung in the dark. */
[data-frame-shadow="talon"] {
	--card-shadow: 0 0 0 1px #000, 0 10px 26px rgba(0, 0, 0, 0.6), inset 0 0 22px color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Scales: a band of overlapping scales in the accent across the top of the card. */
[data-frame-marks="scales"] {
	--card-marks: radial-gradient(circle at 50% 0, transparent 6px, color-mix(in srgb, var(--accent) 60%, transparent) 6px 7.5px, transparent 7.5px) left top / 14px 9px repeat-x,
		radial-gradient(circle at 50% 0, transparent 6px, color-mix(in srgb, var(--accent) 35%, transparent) 6px 7.5px, transparent 7.5px) left 7px top 5px / 14px 9px repeat-x;
}
/* Scales: a warm glow of the accent. */
[data-frame-shadow="scales"] {
	--card-shadow: 0 0 20px color-mix(in srgb, var(--accent) 12%, transparent), 0 8px 20px rgba(0, 0, 0, 0.45);
}

/* Clipped: the top left and lower right corners cut off on a slant, the outline drawn in the border colour along
   the cut and the four sides, and an accent tick at the top right, as on fleet paperwork. */
[data-frame-marks="clipped"] {
	--card-marks: linear-gradient(135deg, var(--bg) 0 13px, var(--border) 13px 14px, transparent 14px) left top / 26px 26px no-repeat,
		linear-gradient(-45deg, var(--bg) 0 13px, var(--border) 13px 14px, transparent 14px) right bottom / 26px 26px no-repeat,
		linear-gradient(var(--border), var(--border)) left 19px top 0 / calc(100% - 19px) 1px no-repeat,
		linear-gradient(var(--border), var(--border)) left 0 top 19px / 1px calc(100% - 19px) no-repeat,
		linear-gradient(var(--border), var(--border)) left 0 bottom 0 / calc(100% - 19px) 1px no-repeat,
		linear-gradient(var(--border), var(--border)) right 0 top 0 / 1px calc(100% - 19px) no-repeat,
		linear-gradient(var(--accent), var(--accent)) right 10px top 10px / 18px 3px no-repeat;
}

/* Planchette: a crescent moon in the accent at the top right and a sun in accent-2 at the lower left. */
[data-frame-marks="planchette"] {
	--card-mask-accent: url(/themes/drawings/frames/planchette-moon.svg) right 10px top 10px / 14px 14px no-repeat;
	--card-ink-accent: color-mix(in srgb, var(--accent) 80%, transparent);
	--card-mask-accent-2: url(/themes/drawings/frames/planchette-sun.svg) left 10px bottom 10px / 14px 14px no-repeat;
	--card-ink-accent-2: color-mix(in srgb, var(--accent-2) 70%, transparent);
}
/* Planchette: an inner brass rule, as on a talking board. */
[data-frame-shadow="planchette"] {
	--card-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 5px color-mix(in srgb, var(--accent) 40%, transparent), 0 8px 22px rgba(0, 0, 0, 0.5);
}

/* Sandstep: a band of stepped shapes in the accent along the top of the card. */
[data-frame-marks="sandstep"] {
	--card-mask-accent: url(/themes/drawings/frames/sandstep-band.svg) left top 4px / 48px 10px repeat-x;
	--card-ink-accent: color-mix(in srgb, var(--accent) 45%, transparent);
}
/* Sandstep: a long shadow, as at dusk. */
[data-frame-shadow="sandstep"] {
	--card-shadow: 6px 14px 28px rgba(0, 0, 0, 0.5);
}

/* Crest: a shield crest in the accent at the top centre. */
[data-frame-marks="crest"] {
	--card-mask-accent: url(/themes/drawings/frames/crest-shield.svg) center top 6px / 16px 19px no-repeat;
}
/* Crest: a faint gold ring and a soft shadow. */
[data-frame-shadow="crest"] {
	--card-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 10px 26px rgba(0, 0, 0, 0.5);
}

/* Riveted: a brass rivet in each corner. */
[data-frame-marks="riveted"] {
	--card-marks: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--accent) 60%, var(--text)) 0 1.5px, var(--accent) 2px 3.5px, transparent 4px) left 5px top 5px / 10px 10px no-repeat,
		radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--accent) 60%, var(--text)) 0 1.5px, var(--accent) 2px 3.5px, transparent 4px) right 5px top 5px / 10px 10px no-repeat,
		radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--accent) 60%, var(--text)) 0 1.5px, var(--accent) 2px 3.5px, transparent 4px) left 5px bottom 5px / 10px 10px no-repeat,
		radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--accent) 60%, var(--text)) 0 1.5px, var(--accent) 2px 3.5px, transparent 4px) right 5px bottom 5px / 10px 10px no-repeat,
		linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 40%);
}
/* Riveted: a lit top edge, a dark lower edge and a drop, as a plate of metal. */
[data-frame-shadow="riveted"] {
	--card-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 18%, transparent), inset 0 -2px 0 rgba(0, 0, 0, 0.4), 0 6px 14px rgba(0, 0, 0, 0.5);
}

/* Wanted: a nail in each top corner. */
[data-frame-marks="wanted"] {
	--card-marks: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--text) 30%, transparent) 0 1px, var(--text) 1.5px 3px, transparent 3.5px) left 6px top 6px / 9px 9px no-repeat,
		radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--text) 30%, transparent) 0 1px, var(--text) 1.5px 3px, transparent 3.5px) right 6px top 6px / 9px 9px no-repeat;
}
/* Wanted: a sheet lifted off the wall, with a hard shadow down and to the right. */
[data-frame-shadow="wanted"] {
	--card-shadow: 3px 4px 0 color-mix(in srgb, var(--text) 18%, transparent);
}

/* Scrap: a hazard stripe of the accent and black along the foot of the card. */
[data-frame-marks="scrap"] {
	--card-marks: repeating-linear-gradient(-45deg, var(--accent) 0 8px, #000 8px 16px) left bottom / 100% 6px no-repeat;
}
/* Scrap: a black ring and a hard dark drop. */
[data-frame-shadow="scrap"] {
	--card-shadow: 0 0 0 1px #000, 4px 4px 0 rgba(0, 0, 0, 0.55);
}

/* Dossier: a menu tile from a tactics game's operator files. A stripe of accent-2 down the left edge with a short
   charcoal slab beside its top, a hairline round the other sides, a register cross at the top right, a solid corner
   triangle at the lower right with a strip of hatching in accent-2 beside it, and a pale diagonal band through the
   tile. Drawn without a border, so the stripe meets the edge. A primary button is a flat slab with a thin light edge
   and a soft drop. */
[data-frame-marks="dossier"] {
	--capsule-primary-edge: inset 0 0 0 1px color-mix(in srgb, var(--accent-on) 30%, transparent), 0 4px 10px rgba(0, 0, 0, 0.22);
	--card-marks: linear-gradient(var(--accent-2), var(--accent-2)) left 0 top 0 / 5px 100% no-repeat,
		linear-gradient(var(--rail-bg), var(--rail-bg)) left 5px top 0 / 34px 4px no-repeat,
		linear-gradient(var(--border-soft), var(--border-soft)) left 0 top 0 / 100% 1px no-repeat,
		linear-gradient(var(--border-soft), var(--border-soft)) right 0 top 0 / 1px 100% no-repeat,
		linear-gradient(var(--border-soft), var(--border-soft)) left 0 bottom 0 / 100% 1px no-repeat,
		linear-gradient(color-mix(in srgb, var(--text) 30%, transparent), color-mix(in srgb, var(--text) 30%, transparent)) right 16px top 10px / 1px 11px no-repeat,
		linear-gradient(color-mix(in srgb, var(--text) 30%, transparent), color-mix(in srgb, var(--text) 30%, transparent)) right 11px top 15px / 11px 1px no-repeat,
		linear-gradient(-45deg, var(--rail-bg) 0 9px, transparent 9px) right 0 bottom 0 / 13px 13px no-repeat,
		linear-gradient(115deg, transparent 56%, color-mix(in srgb, var(--text) 3%, transparent) 56% 72%, transparent 72%) 0 0 / 100% 100% no-repeat;
	--card-mask-accent-2: url(/themes/drawings/frames/dossier-hatch.svg) right 22px bottom 7px / 44px 6px no-repeat;
}
/* Dossier: a tile lifted off the page by a soft drop. */
[data-frame-shadow="dossier"] {
	--card-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.4);
}

/* Archive: a heavy and a fine rule along the top in the text colour, a crop mark at the lower left and a filled
   square at the lower right, as on a page from an archive. */
[data-frame-marks="archive"] {
	--card-marks: linear-gradient(var(--text), var(--text)) left 0 top 0 / 100% 3px no-repeat,
		linear-gradient(var(--text), var(--text)) left 0 top 6px / 100% 1px no-repeat,
		linear-gradient(color-mix(in srgb, var(--text) 45%, transparent), color-mix(in srgb, var(--text) 45%, transparent)) left 8px bottom 8px / 10px 1px no-repeat,
		linear-gradient(color-mix(in srgb, var(--text) 45%, transparent), color-mix(in srgb, var(--text) 45%, transparent)) left 8px bottom 8px / 1px 10px no-repeat,
		linear-gradient(var(--text), var(--text)) right 8px bottom 8px / 7px 7px no-repeat;
}
/* Archive: a soft drop in the text colour. */
[data-frame-shadow="archive"] {
	--card-shadow: 0 10px 24px color-mix(in srgb, var(--text) 16%, transparent), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

/* Loadout: a slanted accent tab on the top left and a second-accent line along the bottom. */
[data-frame-marks="loadout"] {
	--card-marks: linear-gradient(115deg, var(--accent) 0 86%, transparent 86%) left 0 top 0 / 72px 5px no-repeat,
		linear-gradient(var(--accent-2), var(--accent-2)) left 0 bottom 0 / 38% 2px no-repeat;
}
/* Loadout: a hard line under the card in the text colour and a faint lift. */
[data-frame-shadow="loadout"] {
	--card-shadow: 0 2px 0 var(--text), 0 12px 22px rgba(0, 0, 0, 0.08);
}

/* Hairline: one fine rule above and one below in the accent, fading out at both ends. */
[data-frame-marks="hairline"] {
	--card-marks: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, transparent), transparent) left 0 top 0 / 100% 1px no-repeat,
		linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 45%, transparent), transparent) left 0 bottom 0 / 100% 1px no-repeat;
}
/* Hairline: a deep, soft shadow. */
[data-frame-shadow="hairline"] {
	--card-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* Rune: a cut corner with a stud on the top left in the accent, and a broken accent line along the top. */
[data-frame-marks="rune"] {
	--card-marks: linear-gradient(90deg, var(--accent) 0 40%, transparent 40% 44%, var(--accent) 44% 58%, transparent 58%) left 34px top 0 / 70% 1px no-repeat;
	--card-mask-accent: url(/themes/drawings/frames/rune-corner.svg) left 0 top 0 / 40px 40px no-repeat;
}
/* Rune: the accent glowing around the card and inside it. */
[data-frame-shadow="rune"] {
	--card-shadow: 0 0 22px color-mix(in srgb, var(--accent) 18%, transparent), inset 0 0 18px color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Brushed: a dry brush stroke along the top edge in the second accent. */
[data-frame-marks="brushed"] {
	--card-mask-accent-2: url(/themes/drawings/frames/brushed-top.svg) left 0 top 0 / 100% 10px no-repeat;
}
/* Brushed: a deep shadow, as a sheet of paper lifted off a desk. */
[data-frame-shadow="brushed"] {
	--card-shadow: 0 18px 36px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Nodes: a pad of light at each corner, and a short trace in the accent running from the top left one. */
[data-frame-marks="nodes"] {
	--card-marks: radial-gradient(circle, var(--accent) 0 2.5px, transparent 3.5px) left 4px top 4px / 9px 9px no-repeat,
		radial-gradient(circle, var(--accent) 0 2.5px, transparent 3.5px) right 4px top 4px / 9px 9px no-repeat,
		radial-gradient(circle, var(--accent) 0 2.5px, transparent 3.5px) left 4px bottom 4px / 9px 9px no-repeat,
		radial-gradient(circle, var(--accent) 0 2.5px, transparent 3.5px) right 4px bottom 4px / 9px 9px no-repeat,
		linear-gradient(90deg, var(--accent), transparent) left 14px top 8px / 72px 1px no-repeat;
}
/* Nodes: a double edge of light, glowing outward, with a dark gap between its two lines. */
[data-frame-shadow="nodes"] {
	--card-shadow: 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 0 0 3px var(--bg),
		inset 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 0 26px color-mix(in srgb, var(--accent) 7%, transparent);
}

/* Plate: a pale armour strip across the top left with a keel in the accent under it, the top right and lower left
   corners cut off, and a hairline outline (the frame has no border of its own, as clipped) lit in the accent from
   the top left and in the second accent from the lower right, fading to the border colour between them. */
[data-frame-marks="plate"] {
	--card-marks: linear-gradient(110deg, color-mix(in srgb, var(--text) 85%, transparent) 0 92%, transparent 92%) left 0 top 0 / 38% 5px no-repeat,
		linear-gradient(110deg, var(--accent) 0 90%, transparent 90%) left 0 top 5px / 30% 2px no-repeat,
		linear-gradient(-135deg, transparent 0 14px, color-mix(in srgb, var(--accent) 50%, var(--border)) 14px 15px, transparent 15px) right top / 28px 28px no-repeat,
		linear-gradient(45deg, transparent 0 14px, color-mix(in srgb, var(--accent) 50%, var(--border)) 14px 15px, transparent 15px) left bottom / 28px 28px no-repeat,
		linear-gradient(90deg, var(--accent), var(--border) 35%, color-mix(in srgb, var(--accent) 50%, var(--border))) left 0 top 0 / calc(100% - 20px) 1px no-repeat,
		linear-gradient(180deg, var(--accent), var(--border) 45%) left 0 top 0 / 1px calc(100% - 20px) no-repeat,
		linear-gradient(180deg, color-mix(in srgb, var(--accent) 50%, var(--border)), var(--border) 45%, var(--accent-2)) right 0 top 20px / 1px calc(100% - 20px) no-repeat,
		linear-gradient(90deg, color-mix(in srgb, var(--accent) 50%, var(--border)), var(--border) 55%, var(--accent-2)) right 0 bottom 0 / calc(100% - 20px) 1px no-repeat;
}
/* Plate: the card is cut away beyond those two diagonals, and each title is set dark on a pale armour plate with a
   dark tab at its left and an accent seam under it, cut away at its right end; a hairline in the accent fades out
   along the foot of the head. */
[data-frame-marks="plate"] {
	--card-clip: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
	--card-head-rule: 0;
	--card-head-bg: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent), transparent) left bottom / 100% 1px no-repeat;
	--card-title-ink: var(--bg);
	--card-title-shadow: none;
	--card-title-plate: linear-gradient(var(--bg), var(--bg)) left / 22px 100% no-repeat,
		linear-gradient(var(--accent), var(--accent)) left 9px center / 4px 4px no-repeat,
		linear-gradient(180deg, var(--text), color-mix(in srgb, var(--text) 82%, var(--accent-3)));
	--card-title-plate-pad: 3px 22px 3px 32px;
	--card-title-plate-shadow: inset 0 -2px 0 var(--accent);
	--card-title-plate-clip: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
/* Plate: a deep shadow, and a faint accent light inside, as a lit cockpit panel. */
[data-frame-shadow="plate"] {
	--card-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), inset 0 0 22px color-mix(in srgb, var(--accent) 6%, transparent);
}

/* Field guide: a band of the accent along the top over a hinge line in the text colour, and a lens of accent-2 ringed
   in the text colour at the top right, as on a handheld field guide. */
[data-frame-marks="field-guide"] {
	--card-marks: radial-gradient(circle at center, color-mix(in srgb, var(--accent-2) 60%, var(--surface)) 0 2px, var(--accent-2) 2.5px 5px, var(--text) 5.5px 7px, transparent 7.5px) right 10px top 0 / 16px 16px no-repeat,
		linear-gradient(var(--accent), var(--accent)) left 0 top 0 / 100% 7px no-repeat,
		linear-gradient(var(--text), var(--text)) left 0 top 7px / 100% 2px no-repeat;
}
/* Field guide: a hard drop in the text colour, as a chunky plastic case. */
[data-frame-shadow="field-guide"] {
	--card-shadow: 0 5px 0 var(--text);
}
/* Field guide: a card with a title is headed by a full band of the accent, its title in the accent's own text colour,
   a lens at its left and a rule in the text colour under it, as a page of a handheld field guide. The sidebar is
   ruled off in the text colour, and the stat tiles take the card's edge and drop. */
[data-frame-marks="field-guide"] {
	--card-head-bg: radial-gradient(circle at center, color-mix(in srgb, var(--info) 45%, var(--surface)) 0 5px, var(--surface) 5.5px 8px, var(--text) 8.5px 10px, transparent 10.5px) left 14px center / 22px 22px no-repeat,
		var(--accent);
	--card-head-rule: var(--card-border-width) solid var(--text);
	--card-head-radius: calc(var(--radius-card) - var(--card-border-width)) calc(var(--radius-card) - var(--card-border-width)) 0 0;
	--card-head-inset: 26px;
	--card-head-bleed: var(--space-4);
	--card-head-ink: var(--accent-on);
	--card-title-ink: var(--accent-on);
	--card-title-shadow: none;
	--rail-edge: var(--card-border-width) solid var(--text);
	--tile-edge: var(--card-border-width) solid var(--text);
	--tile-shadow: var(--card-shadow);
}

/* Device: three lights along the top of the bezel, the first one lit in the accent, as on a handheld partner device. */
[data-frame-marks="device"] {
	--card-mask-accent: radial-gradient(circle at center, #000 0 2.5px, transparent 3px) right 34px top 1px / 6px 6px no-repeat;
	--card-ink-accent: var(--accent);
	--card-mask-border: radial-gradient(circle at center, #000 0 2.5px, transparent 3px) right 24px top 1px / 6px 6px no-repeat,
		radial-gradient(circle at center, #000 0 2.5px, transparent 3px) right 14px top 1px / 6px 6px no-repeat;
	--card-ink-border: color-mix(in srgb, var(--border) 60%, #000);
}
/* Device: a thick bezel round the screen, lit along its top and dark along its foot, and a deep drop. */
[data-frame-shadow="device"] {
	--card-shadow: inset 0 2px 0 color-mix(in srgb, var(--text) 20%, transparent), inset 0 -3px 0 rgba(0, 0, 0, 0.45),
		inset 0 0 0 8px color-mix(in srgb, var(--border) 75%, var(--surface)), inset 0 0 0 10px rgba(0, 0, 0, 0.55), 0 10px 24px rgba(0, 0, 0, 0.5);
}

/* Lattice: a band of painted beam along the top (second and third accents, divided in the border colour) over a
   rule in the border colour, and key-fret corners in the accent at the foot. */
[data-frame-marks="lattice"] {
	--card-marks: repeating-linear-gradient(90deg, var(--accent-2) 0 22px, var(--accent-3) 22px 44px, var(--border) 44px 48px) left 0 top 0 / 100% 10px no-repeat,
		linear-gradient(var(--border), var(--border)) left 0 top 10px / 100% 2px no-repeat;
	--card-mask-accent: url(/themes/drawings/frames/fret-corner-left.svg) left 0 bottom 0 / 30px 30px no-repeat,
		url(/themes/drawings/frames/fret-corner-right.svg) right 0 bottom 0 / 30px 30px no-repeat;
}
/* Lattice: a warm, soft lift in the text colour. */
[data-frame-shadow="lattice"] {
	--card-shadow: 0 10px 28px color-mix(in srgb, var(--text) 14%, transparent);
}

/* Slips: bamboo slips bound by two cords in the second accent, knotted at the left, with darker edge slips. */
[data-frame-marks="slips"] {
	--card-marks: linear-gradient(var(--accent-2), var(--accent-2)) left 0 top 5px / 100% 2px no-repeat,
		linear-gradient(var(--accent-2), var(--accent-2)) left 0 bottom 5px / 100% 2px no-repeat,
		linear-gradient(var(--border), var(--border)) left 0 top 0 / 3px 100% no-repeat,
		linear-gradient(var(--border), var(--border)) right 0 top 0 / 3px 100% no-repeat;
	--card-mask-accent-2: url(/themes/drawings/frames/slips-knot.svg) left 6px top -2px / 12px 16px no-repeat,
		url(/themes/drawings/frames/slips-knot.svg) left 6px bottom -8px / 12px 16px no-repeat;
}
/* Slips: a deep shadow, as a bound record laid on a dark table. */
[data-frame-shadow="slips"] {
	--card-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

/* Kasagi: a gate's beam across the top in the accent, its tips turned up, and a thin tie-beam under it in the border
   colour. */
[data-frame-marks="kasagi"] {
	--card-marks: linear-gradient(var(--border), var(--border)) left 4% top 16px / 92% 2px no-repeat;
	--card-mask-accent: url(/themes/drawings/frames/kasagi-beam.svg) left 0 top 0 / 100% 10px no-repeat;
}
/* Kasagi: a deep shadow and a warm glow from below, as a lit gate at night. */
[data-frame-shadow="kasagi"] {
	--card-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 6px 22px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Scroll: a hanging scroll's rods, a dark rod across the top and the bottom in the text colour. */
[data-frame-marks="scroll"] {
	--card-marks: linear-gradient(var(--text), var(--text)) left 0 top 0 / 100% 3px no-repeat,
		linear-gradient(var(--text), var(--text)) left 0 bottom 0 / 100% 3px no-repeat;
}
/* Scroll: paper lifted off the wall, a long soft shadow. */
[data-frame-shadow="scroll"] {
	--card-shadow: 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent), 0 20px 50px -20px color-mix(in srgb, var(--text) 30%, transparent);
}

/* Signboard: a station sign's stripe across the top, the second accent with a short run of the accent at its end. */
[data-frame-marks="signboard"] {
	--card-marks: linear-gradient(90deg, var(--accent-2) 0 82%, var(--accent) 82%) left 0 top 0 / 100% 5px no-repeat;
}
/* Signboard: a soft, cool shadow. */
[data-frame-shadow="signboard"] {
	--card-shadow: 0 16px 36px -14px color-mix(in srgb, var(--text) 35%, transparent), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

/* Nightboard: the station stripe lit, glowing onto the card below it. */
[data-frame-marks="nightboard"] {
	--card-marks: linear-gradient(90deg, var(--accent-2) 0 82%, var(--accent) 82%) left 0 top 0 / 100% 4px no-repeat,
		linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent) left 0 top 4px / 100% 40px no-repeat;
}
/* Nightboard: a deep shadow and a faint glow of the line colour. */
[data-frame-shadow="nightboard"] {
	--card-shadow: 0 20px 44px rgba(0, 0, 0, 0.55), 0 0 18px color-mix(in srgb, var(--accent-2) 10%, transparent);
}