/* ==========================================================================
   Materials — the "real" surfaces (Prompt 2, Part A). Load after components.css.

   Procedural, no photos needed: every texture is an SVG filter (feTurbulence,
   feDiffuse/SpecularLighting, feDisplacementMap) baked into a small grey or
   alpha-only file in ../img/tex/. The browser rasterises each file once and
   caches it; nothing here animates a filter. CSS blend modes (overlay,
   multiply) colour the grey layers with the tokens, so no raw colour enters
   the CSS. Masks are inlined as data: URIs because Chrome blocks mask-image
   files on file:// (masks are CORS requests; backgrounds are not).

   Text still sits on flat, low-texture areas only (leaf centre band, slab
   face, polished copper panel, caption bands): see the contrast table in
   ../DESIGN_SYSTEM.md, measured on rendered pixels.

   Fallback: html[data-quality="low"] (set in <head> for Save-Data, 2G,
   ≤ 2 GB memory, prefers-reduced-data, or ?quality=low) and
   prefers-reduced-data swap every material for a plain token colour.
   The --mat-* stacks use relative url()s: use them from css/ files only,
   never from an inline style (it would resolve against the page).
   Prompt 6: every --mat-* stack, material colour and their fallbacks are
   defined ONLY in the material registry (generated block in tokens.css).
   This file maps components onto them; it defines no material of its own.
   ========================================================================== */
:root{
  /* Masks (alpha only). Material colours and texture stacks are in the material registry
     (css/tokens.css, generated block; source design/realism/registry/registry.json). */
  --mask-leaf-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 100' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-2%25' y='-10%25' width='104%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .9' numOctaves='2' seed='5'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='1.6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cmask id='n'%3E%3Crect width='900' height='100' fill='%23fff'/%3E%3Cpath d='M150 0l6 7 5-7zM606 100l5-6 7 6zM900 30l-8 3 8 5zM328 0q4 6 9 0zM0 64l5 3-5 3z'/%3E%3C/mask%3E%3Cg mask='url(%23n)'%3E%3Cpath filter='url(%23d)' d='M9 7Q4 20 5 50T10 93Q40 96 450 96T890 92Q896 70 895 48T889 6Q860 3 450 4T9 7Z'/%3E%3C/g%3E%3C/svg%3E");
  --mask-leaf-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-10%25' y='-2%25' width='120%25' height='104%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5 .08' numOctaves='2' seed='5'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cmask id='n'%3E%3Crect width='300' height='400' fill='%23fff'/%3E%3Cpath d='M0 88l8 4-8 5zM300 243l-7 4 7 5zM120 400l4-6 6 6zM210 0l3 5 4-5z'/%3E%3C/mask%3E%3Cg mask='url(%23n)'%3E%3Cpath filter='url(%23d)' d='M8 12Q40 5 150 6T292 10Q296 100 295 200T291 390Q250 396 150 395T9 389Q4 300 5 200T8 12Z'/%3E%3C/g%3E%3C/svg%3E");
  --mask-stone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-3%25' y='-3%25' width='106%25' height='106%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='3' seed='13'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cmask id='n'%3E%3Crect width='400' height='300' fill='%23fff'/%3E%3Cpath d='M0 0h16l-3 7-13 4zM400 300h-22l6-6 16-7zM400 64l-5 6 5 9zM118 300l5-5 9 5z'/%3E%3C/mask%3E%3Cg mask='url(%23n)'%3E%3Cpath filter='url(%23d)' d='M6 9Q3 4 12 5L391 4Q397 5 396 12L395 290Q395 296 388 296L10 295Q4 295 5 288Z'/%3E%3C/g%3E%3C/svg%3E");
  --mask-patina:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'%3E%3Cfilter id='f' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02' numOctaves='4' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0 1' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0 1' result='sp'/%3E%3CfeComposite in='b' in2='sp' operator='arithmetic' k2='1' k3='.5' k4='-.25'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 7 0 0 0 -3.2'/%3E%3C/filter%3E%3Crect width='480' height='480' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* ---------- Material classes (plain blocks, style guide) ---------- */
.mat-leaf{background:var(--mat-leaf);background-blend-mode:var(--mat-leaf-blend);-webkit-mask:var(--mask-leaf-h) 0 0/100% 100%;mask:var(--mask-leaf-h) 0 0/100% 100%}
.mat-leaf-v{background:var(--mat-leaf-v);background-blend-mode:var(--mat-leaf-v-blend);-webkit-mask:var(--mask-leaf-v) 0 0/100% 100%;mask:var(--mask-leaf-v) 0 0/100% 100%}
.mat-stone{background:var(--mat-stone);background-blend-mode:var(--mat-stone-blend)}
.mat-temple{background:var(--mat-temple);background-blend-mode:var(--mat-stone-blend)}
.mat-copper{position:relative;isolation:isolate;overflow:hidden;background:var(--mat-copper);background-blend-mode:var(--mat-copper-blend)}
.mat-clay{background:var(--mat-clay);background-blend-mode:var(--mat-clay-blend)}
.mat-gold{background:var(--mat-gold);background-blend-mode:var(--mat-metal-blend)}
.mat-silver{background:var(--mat-silver);background-blend-mode:var(--mat-metal-blend)}
.mat-wood{background:var(--mat-wood);background-blend-mode:var(--mat-wood-blend)}
.mat-bundle{background:var(--mat-bundle);background-blend-mode:var(--mat-bundle-blend)}
/* Leaf with two binding holes, 30% and 70% along by default (--hole-a, --hole-b): dark worn rim,
   slight bevel. The stack lives in variables so a ::before (e.g. the manuscript leaf) can reuse it. */
.mat-leaf--holes,.leaf-strip--manuscript .leaf-strip__surface{--hole:9px;--hole-a:30%;--hole-b:70%;
  --_holes-bg:
    radial-gradient(circle at var(--hole-a) 50%,var(--leaf-hole-dark) var(--hole),var(--leaf-hole-soft) calc(var(--hole) + 2px),transparent calc(var(--hole) + 5px)),
    radial-gradient(circle at var(--hole-b) 50%,var(--leaf-hole-dark) var(--hole),var(--leaf-hole-soft) calc(var(--hole) + 2px),transparent calc(var(--hole) + 5px)),
    radial-gradient(circle at calc(var(--hole-a) + 1.5px) calc(50% + 1.5px),transparent calc(var(--hole) + 1px),var(--leaf-hole-lip) calc(var(--hole) + 2.5px),transparent calc(var(--hole) + 4px)),
    radial-gradient(circle at calc(var(--hole-b) + 1.5px) calc(50% + 1.5px),transparent calc(var(--hole) + 1px),var(--leaf-hole-lip) calc(var(--hole) + 2.5px),transparent calc(var(--hole) + 4px)),
    var(--mat-leaf);
  --_holes-mask:var(--mask-leaf-h) 0 0/100% 100%,radial-gradient(circle at var(--hole-a) 50%,var(--mask-off) var(--hole),var(--mask-on) calc(var(--hole) + .5px)),radial-gradient(circle at var(--hole-b) 50%,var(--mask-off) var(--hole),var(--mask-on) calc(var(--hole) + .5px))}
.mat-leaf--holes,.leaf-strip--manuscript .leaf-strip__surface::before{background:var(--_holes-bg);background-blend-mode:multiply,multiply,normal,normal,var(--mat-leaf-blend);
  -webkit-mask:var(--_holes-mask);-webkit-mask-composite:source-in;mask:var(--_holes-mask);mask-composite:intersect}
.mat-stone-face{background:var(--mat-stone-face);background-blend-mode:var(--mat-face-blend);box-shadow:inset 1px 1px 0 var(--carve-dark),inset -1px -1px 0 var(--carve-light),inset 2px 3px 6px var(--shade-soft)}
.mat-copper-panel{background:var(--mat-copper-panel);background-blend-mode:var(--mat-panel-blend);box-shadow:inset 0 0 0 1px var(--shade-soft),inset 0 2px 6px var(--shade-soft)}
.mat-copper>*{position:relative;z-index:1}
.mat-rough{-webkit-mask:var(--mask-stone) 0 0/100% 100%;mask:var(--mask-stone) 0 0/100% 100%}

/* Patina: token colour through a crusty mask, strongest at the edges */
.mat-copper::before,.copper-plate::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;background:var(--copper-patina);opacity:.92;
  -webkit-mask:var(--mask-patina) 0 0/480px,linear-gradient(to right,var(--mask-on) 4%,transparent 30%,transparent 72%,var(--mask-on) 96%),linear-gradient(to bottom,var(--mask-on) 5%,transparent 36%,transparent 64%,var(--mask-on) 95%);
  -webkit-mask-composite:source-in,source-over;
  mask:var(--mask-patina) 0 0/480px,linear-gradient(to right,var(--mask-on) 4%,transparent 30%,transparent 72%,var(--mask-on) 96%),linear-gradient(to bottom,var(--mask-on) 5%,transparent 36%,transparent 64%,var(--mask-on) 95%);
  mask-composite:intersect,add}
/* Dull metal highlight (registry --mat-copper-sheen), fixed where the one top-left light puts it. It no longer follows
   the pointer or device tilt (removed in Prompt 6: decorative). */
.mat-copper::after,.copper-plate::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:var(--mat-copper-sheen) 30% 0/260% 100% no-repeat;
  mix-blend-mode:soft-light}
.copper-plate>*{position:relative;z-index:1}
.copper-plate>.copper-plate__hole,.copper-plate>.copper-plate__ring{position:absolute}

/* Fanned leaf (the open bundle, js/motion.js untieBundle): the SAME 2D palm-leaf material as .mat-leaf--holes
   (T3b, 10/10 visual rows) seen from above at a grazing angle. Along the leaf every texture keeps the size it has
   on a leaf strip; across it, every size is a fraction of the drawn height, i.e. foreshortened with the leaf
   (fibre tile 160 px on a 110 px face -> 145%). Two holes at the spec position (0.289 of the length from each end,
   specs/palm_leaf.json), seen as slits. --leaf-shift / --leaf-tone / --leaf-end give each leaf its own grain
   phase, a small lightness step and its own length (estimates: leaves cut from one palm vary a little). */
.mat-leaf--fan,.leaf-bundle__fan i{--hole-a:28.9%;--hole-b:71.1%;
  background:var(--mat-leaf-fan);background-position:var(--leaf-shift,0px) 0,var(--leaf-shift,0px) 0,var(--leaf-shift,0px) 0,var(--leaf-shift,0px) 0,0 0,0 0;
  background-blend-mode:var(--mat-leaf-fan-blend);filter:brightness(var(--leaf-tone,1));
  -webkit-mask:var(--mask-leaf-h) 0 0/100% 100%,radial-gradient(9px 16% at var(--hole-a) 50%,var(--mask-off) 98%,var(--mask-on)),radial-gradient(9px 16% at var(--hole-b) 50%,var(--mask-off) 98%,var(--mask-on));
  -webkit-mask-composite:source-in;
  mask:var(--mask-leaf-h) 0 0/100% 100%,radial-gradient(9px 16% at var(--hole-a) 50%,var(--mask-off) 98%,var(--mask-on)),radial-gradient(9px 16% at var(--hole-b) 50%,var(--mask-off) 98%,var(--mask-on));
  mask-composite:intersect}
.leaf-bundle__fan i:nth-child(1){--leaf-shift:0px;--leaf-tone:1;--leaf-end:5%}
.leaf-bundle__fan i:nth-child(2){--leaf-shift:-137px;--leaf-tone:.95;--leaf-end:3.5%}
.leaf-bundle__fan i:nth-child(3){--leaf-shift:-61px;--leaf-tone:1.04;--leaf-end:6%}
.leaf-bundle__fan i:nth-child(4){--leaf-shift:-229px;--leaf-tone:.92;--leaf-end:4%}
.leaf-bundle__fan i:nth-child(5){--leaf-shift:-173px;--leaf-tone:1.03;--leaf-end:5.5%}

/* ---------- Text on materials ---------- */
/* Scratched with an iron stylus, then inked: dark line inside a thin lighter groove */
.mat-inked,.leaf-strip__kural{color:var(--ink-soot);
  text-shadow:0 0 .7px color-mix(in srgb,var(--paper) 45%,transparent),.6px .7px 0 color-mix(in srgb,var(--paper) 26%,transparent)}
/* Carved into stone: shaded groove (dark at the top of each line), dust in the groove, lit lower edge */
.mat-carved,.stone-slab__title,.carved{color:var(--stone-dark);
  background:var(--mat-carved-text);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;
  filter:drop-shadow(1px 1px 0 var(--carve-light))}
.stone-slab--temple .stone-slab__title{
  background:var(--mat-carved-text-temple);
  -webkit-background-clip:text;background-clip:text}
/* Engraved in copper: dark groove, green patina settles along its lower lip */
.mat-engraved,.copper-plate__title,.copper-plate__panel p{
  text-shadow:0 .9px 0 var(--copper-engrave-lip),0 -.6px 0 var(--shade-soft)}
/* Struck coin legend. With WebGL2, js/realism/coin_face.js bakes the legend and every struck mark into the coin's
   own material (T4-coins, relief lit by the one top-left light) and this DOM text is hidden; the text-shadow
   below is only the flat fallback (no WebGL2, quality=low, the style guide's "before" specimen). */
.coin-card__legend{text-shadow:-1px -1px 0 color-mix(in srgb,var(--paper) 50%,transparent),1px 1px 1px var(--shade-strong)}
.coin-card__face{position:absolute;inset:0;z-index:0;width:100%;height:100%;border-radius:inherit;pointer-events:none}
.coin-card__coin.is-baked>svg,.coin-card__coin.is-baked>.coin-card__legend{visibility:hidden}
/* the flan's edge bevel stays a CSS rim above the baked face: lit edge top-left, shade bottom-right, same light */
.coin-card__coin.is-baked::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  box-shadow:inset 2px 2px 2px color-mix(in srgb,var(--paper) 30%,transparent),inset -2px -3px 4px var(--shade-strong)}

/* ---------- Components on real materials ---------- */
/* Leaf strip: vertical (phone) leaf */
.leaf-strip__surface::before{border-radius:14% 18% 16% 12% / 2% 2.4% 2.2% 1.8%;
  background:
    radial-gradient(circle at 50% 34px,var(--leaf-hole-dark) var(--hole),var(--leaf-hole-soft) calc(var(--hole) + 2px),transparent calc(var(--hole) + 5px)),
    radial-gradient(circle at 50% calc(100% - 34px),var(--leaf-hole-dark) var(--hole),var(--leaf-hole-soft) calc(var(--hole) + 2px),transparent calc(var(--hole) + 5px)),
    radial-gradient(circle at calc(50% + 1.5px) calc(34px + 1.5px),transparent calc(var(--hole) + 1px),var(--leaf-hole-lip) calc(var(--hole) + 2.5px),transparent calc(var(--hole) + 4px)),
    radial-gradient(circle at calc(50% + 1.5px) calc(100% - 32.5px),transparent calc(var(--hole) + 1px),var(--leaf-hole-lip) calc(var(--hole) + 2.5px),transparent calc(var(--hole) + 4px)),
    var(--mat-leaf-v);
  background-blend-mode:multiply,multiply,normal,normal,var(--mat-leaf-v-blend);
  -webkit-mask:var(--mask-leaf-v) 0 0/100% 100%,radial-gradient(circle at 50% 34px,var(--mask-off) var(--hole),var(--mask-on) calc(var(--hole) + .5px)),radial-gradient(circle at 50% calc(100% - 34px),var(--mask-off) var(--hole),var(--mask-on) calc(var(--hole) + .5px));
  -webkit-mask-composite:source-in;
  mask:var(--mask-leaf-v) 0 0/100% 100%,radial-gradient(circle at 50% 34px,var(--mask-off) var(--hole),var(--mask-on) calc(var(--hole) + .5px)),radial-gradient(circle at 50% calc(100% - 34px),var(--mask-off) var(--hole),var(--mask-on) calc(var(--hole) + .5px));
  mask-composite:intersect}
@container leaf (min-width:55rem){
  .leaf-strip__surface::before{border-radius:2% 1.5% 1.8% 2.2% / 34% 40% 36% 32%;
    background:
      radial-gradient(circle at 30% 50%,var(--leaf-hole-dark) var(--hole),var(--leaf-hole-soft) calc(var(--hole) + 2px),transparent calc(var(--hole) + 5px)),
      radial-gradient(circle at 70% 50%,var(--leaf-hole-dark) var(--hole),var(--leaf-hole-soft) calc(var(--hole) + 2px),transparent calc(var(--hole) + 5px)),
      radial-gradient(circle at calc(30% + 1.5px) calc(50% + 1.5px),transparent calc(var(--hole) + 1px),var(--leaf-hole-lip) calc(var(--hole) + 2.5px),transparent calc(var(--hole) + 4px)),
      radial-gradient(circle at calc(70% + 1.5px) calc(50% + 1.5px),transparent calc(var(--hole) + 1px),var(--leaf-hole-lip) calc(var(--hole) + 2.5px),transparent calc(var(--hole) + 4px)),
      var(--mat-leaf);
    background-blend-mode:multiply,multiply,normal,normal,var(--mat-leaf-blend);
    -webkit-mask:var(--mask-leaf-h) 0 0/100% 100%,radial-gradient(circle at 30% 50%,var(--mask-off) var(--hole),var(--mask-on) calc(var(--hole) + .5px)),radial-gradient(circle at 70% 50%,var(--mask-off) var(--hole),var(--mask-on) calc(var(--hole) + .5px));
    -webkit-mask-composite:source-in;
    mask:var(--mask-leaf-h) 0 0/100% 100%,radial-gradient(circle at 30% 50%,var(--mask-off) var(--hole),var(--mask-on) calc(var(--hole) + .5px)),radial-gradient(circle at 70% 50%,var(--mask-off) var(--hole),var(--mask-on) calc(var(--hole) + .5px));
    mask-composite:intersect}
}

.leaf-strip__surface{filter:drop-shadow(0 1px .5px var(--shade-strong)) drop-shadow(1px 2px 3px var(--shade-soft))}

/* Bundle: stacked edges, worn boards, twisted thread with a soft shadow on the leaves */
.leaf-bundle__stack{background:var(--mat-bundle);background-blend-mode:var(--mat-bundle-blend)}
.leaf-bundle__board{background:var(--mat-wood);background-blend-mode:var(--mat-wood-blend);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--paper) 16%,transparent),inset 0 -1px 0 var(--shade-strong),0 1px 2px var(--shade-strong)}
/* Twist: diagonal bands of lower alpha read as the ply of a twisted cotton cord */
.leaf-bundle__art svg{filter:drop-shadow(.5px 1.2px .6px var(--shade-strong));
  -webkit-mask:repeating-linear-gradient(-58deg,var(--mask-on) 0 2.4px,color-mix(in srgb,var(--mask-on) 50%,transparent) 2.4px 3.6px);
  mask:repeating-linear-gradient(-58deg,var(--mask-on) 0 2.4px,color-mix(in srgb,var(--mask-on) 50%,transparent) 2.4px 3.6px)}
.leaf-bundle__x{-webkit-mask:repeating-linear-gradient(32deg,var(--mask-on) 0 2.4px,color-mix(in srgb,var(--mask-on) 50%,transparent) 2.4px 3.6px);
  mask:repeating-linear-gradient(32deg,var(--mask-on) 0 2.4px,color-mix(in srgb,var(--mask-on) 50%,transparent) 2.4px 3.6px)}

/* Stone slab: rough-cut body on ::before, soft shadow on ::after, flat face for text */
.stone-slab{position:relative;isolation:isolate;background:none;box-shadow:none}
.stone-slab::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--mat-stone);background-blend-mode:var(--mat-stone-blend);
  -webkit-mask:var(--mask-stone) 0 0/100% 100%;mask:var(--mask-stone) 0 0/100% 100%}
.stone-slab::after{content:"";position:absolute;inset:6px 4px 0;z-index:-2;border-radius:10px;background:var(--shade-strong);filter:blur(6px);transform:translateY(4px);opacity:.8}
.stone-slab--temple::before{background:var(--mat-temple);background-blend-mode:var(--mat-stone-blend)}
.stone-slab__face{background:var(--mat-stone-face);background-blend-mode:var(--mat-face-blend);
  box-shadow:inset 1px 1px 0 var(--carve-dark),inset -1px -1px 0 var(--carve-light),inset 2px 3px 6px var(--shade-soft)}
.stone-slab--temple .stone-slab__face{background:var(--mat-temple-face);background-blend-mode:var(--mat-face-blend)}
a.stone-slab[href]:is(:hover,.is-hover),a.stone-slab[href]:is(:active,.is-active){box-shadow:none}

/* Copper plate: hammered metal, patina (::before), movable sheen (::after) */
.copper-plate{background:var(--mat-copper);background-blend-mode:var(--mat-copper-blend)}
.copper-plate__panel{background:var(--mat-copper-panel);background-blend-mode:var(--mat-panel-blend)}

/* Sherd: clay grain, slip bands, chipped outline */
.sherd-card__piece::before{background:var(--mat-clay);background-blend-mode:var(--mat-clay-blend)}
.sherd-card__piece svg{filter:drop-shadow(.6px .8px 0 var(--terracotta-deep))}

/* Coins and ring: worn metal with a raised rim */
.coin-card__coin{background:var(--_mat);background-blend-mode:var(--mat-metal-blend);
  box-shadow:inset 0 0 0 2px var(--_rim),inset 3px 3px 3px color-mix(in srgb,var(--paper) 42%,transparent),
    inset -3px -3px 5px var(--shade-strong),inset 0 0 0 10px var(--_rim-soft),var(--shadow-rest)}
a.coin-card[href]:is(:hover,.is-hover) .coin-card__coin{box-shadow:inset 0 0 0 2px var(--_rim),inset 3px 3px 3px color-mix(in srgb,var(--paper) 42%,transparent),
    inset -3px -3px 5px var(--shade-strong),inset 0 0 0 10px var(--_rim-soft),var(--shadow-lift)}
.ring-seal__bezel{background:var(--mat-ring);background-blend-mode:var(--mat-ring-blend)}
.ring-seal__impression{background:var(--mat-clay-impression);background-blend-mode:var(--mat-clay-impression-blend)}

/* ---------- Low quality: plain colours (the registry's low_quality fallbacks), no texture files, no SVG masks ---------- */
:root[data-quality="low"]{--mask-leaf-h:linear-gradient(var(--mask-on) 0 0);--mask-leaf-v:linear-gradient(var(--mask-on) 0 0);--mask-stone:linear-gradient(var(--mask-on) 0 0)}
:root[data-quality="low"] :is(.mat-copper,.copper-plate)::before,:root[data-quality="low"] :is(.mat-copper,.copper-plate)::after,:root[data-quality="low"] .stone-slab::after{display:none}
:root[data-quality="low"] :is(.mat-carved,.stone-slab__title,.carved){background:none;-webkit-text-fill-color:currentColor;filter:none}
:root[data-quality="low"] .leaf-bundle__art svg{filter:none;-webkit-mask:none;mask:none}
:root[data-quality="low"] .leaf-bundle__fan i{filter:none}
@media (prefers-reduced-data:reduce){
  :root{--mask-leaf-h:linear-gradient(var(--mask-on) 0 0);--mask-leaf-v:linear-gradient(var(--mask-on) 0 0);--mask-stone:linear-gradient(var(--mask-on) 0 0)}
  :is(.mat-copper,.copper-plate)::before{display:none}
}
@media (forced-colors:active){
  [class*="mat-"],.leaf-strip__surface::before,.stone-slab::before,.sherd-card__piece::before,.leaf-bundle__fan i{background:Canvas!important;forced-color-adjust:auto}
  :is(.mat-carved,.stone-slab__title,.carved){-webkit-text-fill-color:CanvasText;background:none;filter:none}
}


/* ============ T9b: the seal stays 2D, with the tuned colours ============
   The T3b gate (eval/gates/seals.json) kept the seal 2D (aspect_ratio 1.005 of 1.009..2.465); its 2D colours are
   the T4 tuned seal ramp, now registry palette entries --seal-bronze* (design/realism/registry/registry.json, with
   the CIELAB sources). The seal's fill/stroke rules are in components.css (section "Seal"); since Prompt 6 the small
   seal on a copper-plate ring is drawn in the same seal colours (it IS the seal, not part of the plate). */
:root[data-quality="low"] .seal__patina{display:none}
@media (forced-colors:active){
  .seal__body,.seal__raised,.seal__field,.seal__legend,.seal__raised-shadow,.seal__raised-hi,.seal__patina{fill:CanvasText;forced-color-adjust:auto}
  .seal__body,.seal__field{fill:Canvas}
  .seal__rim,.seal__rim-hi{stroke:CanvasText}
}