/* © 2026 MEK.txt. All rights reserved. Part of the MEK design system; not licensed for reuse. */
/* MEK design system · part: motifs
   Frames and ornaments from MEK.txt's pixel art (assets/motifs.json, docs/motifs.html), placed with js/motifs.js.
   .motif is one, drawn at a whole multiple of its size (data-scale, 2 by default). .motif-frame is a frame that
   grows round what's inside it, so it takes the size of its content, or the size you give it. Both name their motif
   with data-motif="<id>".
   A frame: its sides are a transparent border as wide as the frame's (its slice × --frame-k, the scale), from the
   block at the end of this file, which scripts/motifs.py writes. So it takes its room as the page lays out, before
   the script has loaded, and nothing moves when it's drawn. The script draws the frame at the box's own size, every
   motif pixel --frame-k screen pixels square, corners as drawn and sides repeated between them (nine-slice's grow), and
   hands it over as --frame-img, --frame-w and --frame-h. It draws it again when the box changes size or the theme
   changes.
   Colours: a motif has none of its own. It's drawn in up to four tones, --motif-1 (its strongest) to --motif-4
   (its weakest) in css/tokens.css: the theme's --700, --600, --500 and --400, or a theme's own (DOS Age: its blues).
   So it follows the theme as an icon does and turns over in a dark one.
   Opt-in: link it after mek.css, with js/motifs.js. In the mek.parts layer, so a project's CSS wins. */

@layer mek.parts {

.motif { display: inline-block; vertical-align: middle; background: no-repeat 0 0 / 100% 100%; image-rendering: pixelated; }

/* The scale: 2 unless data-scale says. The script sets it too (any whole number); these are for before it has. */
:is(.motif-frame, .px-box[data-frame]) { --frame-k: 2; }
:is(.motif-frame, .px-box[data-frame])[data-scale="1"] { --frame-k: 1; }
:is(.motif-frame, .px-box[data-frame])[data-scale="3"] { --frame-k: 3; }
:is(.motif-frame, .px-box[data-frame])[data-scale="4"] { --frame-k: 4; }
:is(.motif-frame, .px-box[data-frame])[data-scale="5"] { --frame-k: 5; }
:is(.motif-frame, .px-box[data-frame])[data-scale="6"] { --frame-k: 6; }
:is(.motif-frame, .px-box[data-frame])[data-scale="7"] { --frame-k: 7; }
:is(.motif-frame, .px-box[data-frame])[data-scale="8"] { --frame-k: 8; }   /* (past 8 it lays out at 2× until the script has drawn it) */
/* The frame is its background image: a project can give it a background colour (it shows through the middle), but
   not the background shorthand, which would take the picture away. */
.motif-frame { box-sizing: border-box; border: 0 solid transparent;
  border-width: var(--frame-t, 0) var(--frame-r, 0) var(--frame-b, 0) var(--frame-l, 0);
  background-image: var(--frame-img, none); background-position: 0 0; background-repeat: no-repeat;
  background-size: var(--frame-w, 100%) var(--frame-h, 100%); background-origin: border-box; background-clip: border-box;
  image-rendering: pixelated; }

/* ---------- A frame on a px-box: data-frame="<id>" ----------
   Any px-box can wear a frame that grows in place of its 1px line: <div class="px-box" data-frame="gold-double-line-frame">.
   It keeps being a px-box. Its edge layer (::before) is the frame's shape: the edge's own paint (--px-edge-paint:
   --edge, the hover to --edge-to) shows through the frame's strongest tone, a, so every state that sets --edge
   (.on, [aria-current], .featured, a selected cell, a flash) colours the frame's line, and it dissolves on hover as
   any px-box does; tones b to d lie over it in the theme's --motif-2 to --motif-4. Its fill (::after) is the box inside
   the frame, inset by the frame's sides (--frame-t, -r, -b, -l), square: a frame's corners are its own. A state that
   quiets the whole frame sets --motif-2 to --motif-4 on the box too (a class change that alters them draws them again);
   an animation that returns to rest returns --edge to var(--frame-line, its own). The frame's
   see-through pixels show the page behind, not the fill (.frame-fill puts the fill under them).
   The sides are in this file before the script draws (as .motif-frame's), so nothing moves when it does. Its content
   doesn't make room for them by itself: .frame-pad does, or a part's padding is calc(var(--frame-t, 1px) + its own
   air), each side.
   Until it's drawn, the box shows its fill and no line. Not on .accent (the loud spot is all edge), a switch's or a
   tab row's segments (their tray is their box), an icon-only button (its square has no room for the sides) or the
   skip link. A .btn wears one as any box does: the frame stays put when it's pressed and the label drops a frame pixel.
   The box's selector below and js/motifs.js's BOX are one string: change both together. */
/* A frame's sides and scale are a box's own: a plain px-box inside a framed one doesn't pad or place by them. (A
   framed one sets them again: the sides' block at the end of this file is more specific.) */
.px-box { --frame-t: initial; --frame-r: initial; --frame-b: initial; --frame-l: initial; }
/* A frame's pictures are its own: one inside another doesn't show its parent's before it's drawn. */
:is(.motif-frame, .px-box[data-frame]) { --frame-img: initial; --frame-mask: initial; --frame-paint: initial; --frame-w: initial; --frame-h: initial; }

/* Every box that can wear a frame, in one selector (js/motifs.js's BOX is the same string: change both together). */
.px-box[data-frame]:not(.accent, .skip, .switch > *, .btn[aria-label]:has(> .icon:only-of-type):not(:has(> :not(.icon, kbd.key)))) {
  /* At rest the frame's line is a step under its strongest tone (--motif-2), so a screen of framed boxes stays quiet;
     a box you can pick (a cell, a slot, a button) brightens it a step, to --motif-1, on hover (--frame-line-to). These
     are px-box's --frame-line and --frame-line-to, which any --edge or --edge-to (.on, .featured, an alert's kind, a
     part's state) wins over. */
  --frame-line: var(--motif-2); --frame-line-to: var(--motif-1);
  /* The dissolve's dither in the frame's own pixels (2 of them square), not finer. A pressed button's edge layer stays put. */
  &::before { inset: 0; clip-path: none; image-rendering: pixelated;
    background: var(--frame-paint, none) 0 0 / var(--frame-w, 100%) var(--frame-h, 100%) no-repeat,
      var(--px-edge-paint) 0 0 / calc(2px * var(--frame-k, 2)) calc(2px * var(--frame-k, 2));
    mask: var(--frame-mask, linear-gradient(transparent, transparent)) 0 0 / var(--frame-w, 100%) var(--frame-h, 100%) no-repeat; }
  &::after { clip-path: none; inset: var(--frame-t, 1px) var(--frame-r, 1px) var(--frame-b, 1px) var(--frame-l, 1px); }
  /* .frame-fill: the fill lies under the whole frame, not inside its sides, so the frame's see-through pixels show
     the box's fill (and its hover's), never what's behind the box: a toast over a page, a card on a busy ground. The
     fill is the box's rectangle, so a frame whose outline isn't closed (a shadow down one side, an edge of teeth)
     shows it in its outer gaps too. */
  &.frame-fill::after { inset: 0; z-index: -2; }
  /* Disabled quiets the whole frame, not its line alone. */
  &:is(:disabled, [aria-disabled="true"]) { --motif-2: var(--line); --motif-3: var(--line); --motif-4: var(--line); }
  /* A button: the air inside the frame's sides that a plain one has inside its line and foot (8px and 9px less those),
     and pressed, the label drops a frame pixel while the frame and the fill hold (the fill paints over the frame, so it
     can't slide into it). */
  &.btn { padding: calc(var(--frame-t, 1px) + var(--space-2) - 1px) calc(var(--frame-r, 1px) + 8px) calc(var(--frame-b, var(--btn-foot)) + var(--space-2) - 1px) calc(var(--frame-l, 1px) + 8px); }   /* (a frame with no sides: as a plain button) */
  &.btn:is(:active:not(:disabled), .pushed) {
    padding-block: calc(var(--frame-t, 1px) + var(--space-2) - 1px + var(--btn-press) * var(--frame-k, 2)) calc(var(--frame-b, var(--btn-foot)) + var(--space-2) - 1px - var(--btn-press) * var(--frame-k, 2)); }
}
/* .frame-pad: room for the frame's sides and --frame-air (12px) inside them, each side. A part pads the same way:
   calc(var(--frame-t, 1px) + its own air), and so on round. */
.frame-pad { --frame-air: var(--space-3);
  padding: calc(var(--frame-t, 1px) + var(--frame-air)) calc(var(--frame-r, 1px) + var(--frame-air))
    calc(var(--frame-b, 1px) + var(--frame-air)) calc(var(--frame-l, 1px) + var(--frame-air)); }

/* ---------- Each frame's sides: made by scripts/motifs.py from assets/motifs/*.pix, never edited ---------- */
:is(.motif-frame[data-motif="orange-chequer-border-frame"], [data-frame="orange-chequer-border-frame"]) { --frame-t: calc(6px * var(--frame-k, 2)); --frame-r: calc(7px * var(--frame-k, 2)); --frame-b: calc(7px * var(--frame-k, 2)); --frame-l: calc(6px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="orange-stepped-double-frame"], [data-frame="orange-stepped-double-frame"]) { --frame-t: calc(3px * var(--frame-k, 2)); --frame-r: calc(3px * var(--frame-k, 2)); --frame-b: calc(3px * var(--frame-k, 2)); --frame-l: calc(3px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="red-dotted-ornate-frame"], [data-frame="red-dotted-ornate-frame"]) { --frame-t: calc(21px * var(--frame-k, 2)); --frame-r: calc(21px * var(--frame-k, 2)); --frame-b: calc(21px * var(--frame-k, 2)); --frame-l: calc(21px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="red-woven-ornate-frame"], [data-frame="red-woven-ornate-frame"]) { --frame-t: calc(31px * var(--frame-k, 2)); --frame-r: calc(31px * var(--frame-k, 2)); --frame-b: calc(31px * var(--frame-k, 2)); --frame-l: calc(31px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="gold-purple-layered-frame"], [data-frame="gold-purple-layered-frame"]) { --frame-t: calc(3px * var(--frame-k, 2)); --frame-r: calc(3px * var(--frame-k, 2)); --frame-b: calc(3px * var(--frame-k, 2)); --frame-l: calc(3px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="red-concentric-line-frame"], [data-frame="red-concentric-line-frame"]) { --frame-t: calc(15px * var(--frame-k, 2)); --frame-r: calc(15px * var(--frame-k, 2)); --frame-b: calc(15px * var(--frame-k, 2)); --frame-l: calc(15px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="gachamek-card-flat-frame"], [data-frame="gachamek-card-flat-frame"]) { --frame-t: calc(10px * var(--frame-k, 2)); --frame-r: calc(10px * var(--frame-k, 2)); --frame-b: calc(10px * var(--frame-k, 2)); --frame-l: calc(10px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="gachamek-card-toast-frame"], [data-frame="gachamek-card-toast-frame"]) { --frame-t: calc(10px * var(--frame-k, 2)); --frame-r: calc(12px * var(--frame-k, 2)); --frame-b: calc(12px * var(--frame-k, 2)); --frame-l: calc(10px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="grey-stepped-corner-frame"], [data-frame="grey-stepped-corner-frame"]) { --frame-t: calc(6px * var(--frame-k, 2)); --frame-r: calc(6px * var(--frame-k, 2)); --frame-b: calc(6px * var(--frame-k, 2)); --frame-l: calc(6px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="orange-corner-flourish-frame"], [data-frame="orange-corner-flourish-frame"]) { --frame-t: calc(10px * var(--frame-k, 2)); --frame-r: calc(10px * var(--frame-k, 2)); --frame-b: calc(10px * var(--frame-k, 2)); --frame-l: calc(10px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="pink-thick-card-frame"], [data-frame="pink-thick-card-frame"]) { --frame-t: calc(5px * var(--frame-k, 2)); --frame-r: calc(5px * var(--frame-k, 2)); --frame-b: calc(5px * var(--frame-k, 2)); --frame-l: calc(5px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="red-triple-line-frame"], [data-frame="red-triple-line-frame"]) { --frame-t: calc(5px * var(--frame-k, 2)); --frame-r: calc(7px * var(--frame-k, 2)); --frame-b: calc(7px * var(--frame-k, 2)); --frame-l: calc(5px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="blue-frame-diagonal-corners"], [data-frame="blue-frame-diagonal-corners"]) { --frame-t: calc(9px * var(--frame-k, 2)); --frame-r: calc(9px * var(--frame-k, 2)); --frame-b: calc(9px * var(--frame-k, 2)); --frame-l: calc(9px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="blue-crenellated-frame"], [data-frame="blue-crenellated-frame"]) { --frame-t: calc(3px * var(--frame-k, 2)); --frame-r: calc(6px * var(--frame-k, 2)); --frame-b: calc(6px * var(--frame-k, 2)); --frame-l: calc(3px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="green-window-title-frame"], [data-frame="green-window-title-frame"]) { --frame-t: calc(5px * var(--frame-k, 2)); --frame-r: calc(12px * var(--frame-k, 2)); --frame-b: calc(1px * var(--frame-k, 2)); --frame-l: calc(7px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="grey-stamp-bracket-frame"], [data-frame="grey-stamp-bracket-frame"]) { --frame-t: calc(10px * var(--frame-k, 2)); --frame-r: calc(11px * var(--frame-k, 2)); --frame-b: calc(11px * var(--frame-k, 2)); --frame-l: calc(10px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="lost-temporals-button-frame"], [data-frame="lost-temporals-button-frame"]) { --frame-t: calc(3px * var(--frame-k, 2)); --frame-r: calc(3px * var(--frame-k, 2)); --frame-b: calc(4px * var(--frame-k, 2)); --frame-l: calc(3px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="peach-diagonal-corner-frame"], [data-frame="peach-diagonal-corner-frame"]) { --frame-t: calc(12px * var(--frame-k, 2)); --frame-r: calc(12px * var(--frame-k, 2)); --frame-b: calc(12px * var(--frame-k, 2)); --frame-l: calc(12px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="red-stamp-edge-frame"], [data-frame="red-stamp-edge-frame"]) { --frame-t: calc(2px * var(--frame-k, 2)); --frame-r: calc(3px * var(--frame-k, 2)); --frame-b: calc(3px * var(--frame-k, 2)); --frame-l: calc(2px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="white-bracket-stamp-frame"], [data-frame="white-bracket-stamp-frame"]) { --frame-t: calc(11px * var(--frame-k, 2)); --frame-r: calc(12px * var(--frame-k, 2)); --frame-b: calc(12px * var(--frame-k, 2)); --frame-l: calc(11px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="white-frame-diagonal-corners"], [data-frame="white-frame-diagonal-corners"]) { --frame-t: calc(9px * var(--frame-k, 2)); --frame-r: calc(9px * var(--frame-k, 2)); --frame-b: calc(9px * var(--frame-k, 2)); --frame-l: calc(9px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="cyan-frame-with-corner-notches"], [data-frame="cyan-frame-with-corner-notches"]) { --frame-t: calc(3px * var(--frame-k, 2)); --frame-r: calc(3px * var(--frame-k, 2)); --frame-b: calc(3px * var(--frame-k, 2)); --frame-l: calc(3px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="gold-double-line-frame"], [data-frame="gold-double-line-frame"]) { --frame-t: calc(6px * var(--frame-k, 2)); --frame-r: calc(6px * var(--frame-k, 2)); --frame-b: calc(6px * var(--frame-k, 2)); --frame-l: calc(6px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="nested-teal-frames"], [data-frame="nested-teal-frames"]) { --frame-t: calc(12px * var(--frame-k, 2)); --frame-r: calc(12px * var(--frame-k, 2)); --frame-b: calc(12px * var(--frame-k, 2)); --frame-l: calc(12px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="red-frame-corner-ornaments"], [data-frame="red-frame-corner-ornaments"]) { --frame-t: calc(35px * var(--frame-k, 2)); --frame-r: calc(35px * var(--frame-k, 2)); --frame-b: calc(35px * var(--frame-k, 2)); --frame-l: calc(35px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="blue-ornate-border-frame"], [data-frame="blue-ornate-border-frame"]) { --frame-t: calc(104px * var(--frame-k, 2)); --frame-r: calc(134px * var(--frame-k, 2)); --frame-b: calc(104px * var(--frame-k, 2)); --frame-l: calc(134px * var(--frame-k, 2)); }
:is(.motif-frame[data-motif="ornate-green-studded-frame"], [data-frame="ornate-green-studded-frame"]) { --frame-t: calc(73px * var(--frame-k, 2)); --frame-r: calc(85px * var(--frame-k, 2)); --frame-b: calc(73px * var(--frame-k, 2)); --frame-l: calc(81px * var(--frame-k, 2)); }
/* ---------- end of the frames' sides ---------- */

}