/* ── Custex textile DNA — geometric weave & jacquard motifs ──
   Atelier only. Pigment is styled separately in editor.css. */

[data-theme="atelier"] {
  /* — selvedge stripe: tick marks like a finished bolt edge — */
  --tex-selvedge:
    repeating-linear-gradient(90deg,
      var(--ink) 0 1px,
      transparent 1px 6px,
      var(--accent) 6px 7px,
      transparent 7px 12px);

  /* — plain weave (warp + weft) at small scale — */
  --tex-weave-tiny:
    repeating-linear-gradient(0deg,
      rgba(58,47,38,0.10) 0 0.5px,
      transparent 0.5px 4px),
    repeating-linear-gradient(90deg,
      rgba(58,47,38,0.10) 0 0.5px,
      transparent 0.5px 4px);

  /* — twill diagonal — */
  --tex-twill:
    repeating-linear-gradient(45deg,
      rgba(58,47,38,0.18) 0 1px,
      transparent 1px 5px);

  /* — herringbone (two opposing twills) — */
  --tex-herring:
    repeating-linear-gradient(60deg,
      rgba(58,47,38,0.14) 0 1px,
      transparent 1px 6px),
    repeating-linear-gradient(-60deg,
      rgba(58,47,38,0.14) 0 1px,
      transparent 1px 6px);

  /* — running stitch (dashed seam) — */
  --tex-stitch:
    repeating-linear-gradient(90deg,
      var(--line-strong) 0 6px,
      transparent 6px 10px);
}

/* ─────────── selvedge edges on app frame ─────────── */
.cx-app[data-theme="atelier"] {
  position: relative;
}
.cx-app[data-theme="atelier"]::before {
  /* top selvedge stripe — chunky, immediately reads as woven edge */
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
  background:
    repeating-linear-gradient(90deg,
      var(--accent) 0 4px,
      var(--ink) 4px 5px,
      var(--accent-2) 5px 9px,
      var(--ink) 9px 10px,
      var(--accent-3) 10px 14px,
      var(--ink) 14px 15px,
      var(--paper) 15px 19px,
      var(--ink) 19px 20px),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.4) 0 1px,
      transparent 1px 2px);
  background-size: 100% 6px, 100% 100%;
  background-position: 0 0, 0 0;
  background-repeat: repeat-x;
  z-index: 5;
  pointer-events: none;
  border-bottom: 0.5px solid var(--ink);
}
.cx-app[data-theme="atelier"]::after {
  /* warp threads down both sides */
  content: '';
  position: absolute;
  inset: 4px 0 0 0;
  background:
    linear-gradient(90deg, var(--accent) 0 0.5px, transparent 0.5px 6px, var(--accent-2) 6px 6.5px, transparent 6.5px 12px) left / 12px 100% repeat-y,
    linear-gradient(90deg, var(--accent-2) 0 0.5px, transparent 0.5px 6px, var(--accent) 6px 6.5px, transparent 6.5px 12px) right / 12px 100% repeat-y;
  background-repeat: no-repeat, no-repeat;
  background-size: 4px 100%, 4px 100%;
  background-position: 0 0, 100% 0;
  opacity: 0.55;
  z-index: 4;
  pointer-events: none;
}

/* ─────────── topbar — selvedge stripe under it ─────────── */
[data-theme="atelier"] .cx-topbar {
  position: relative;
}
[data-theme="atelier"] .cx-topbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 6px;
  background:
    repeating-linear-gradient(90deg,
      var(--accent) 0 2px,
      transparent 2px 8px),
    repeating-linear-gradient(90deg,
      var(--accent-2) 0 1px,
      transparent 1px 14px);
  background-size: 100% 1.5px, 100% 1px;
  background-position: 0 1px, 0 4px;
  background-repeat: repeat-x;
  opacity: 0.55;
  pointer-events: none;
}

/* ─────────── canvas — woven warp/weft instead of dot grid ─────────── */
[data-theme="atelier"] .cx-canvas-wrap {
  background-color: var(--canvas-bg) !important;
}
/* Canvas fill — default / picker: weave | dots | stripes */
[data-theme="atelier"] .cx-grid[data-cx-canvas-pattern="weave"] {
  background-image:
    /* coarse warp lines (vertical) */
    repeating-linear-gradient(90deg,
      rgba(110,90,60,0.22) 0 1px,
      transparent 1px 8px),
    /* coarse weft lines (horizontal) */
    repeating-linear-gradient(0deg,
      rgba(110,90,60,0.22) 0 1px,
      transparent 1px 8px),
    /* slub thread accents — exact sRGB from tokens (--accent-rgb / --accent-2-rgb) */
    repeating-linear-gradient(0deg,
      rgba(var(--accent-rgb), 0.32) 0 1px,
      transparent 1px 56px),
    repeating-linear-gradient(90deg,
      rgba(var(--accent-2-rgb), 0.32) 0 1px,
      transparent 1px 56px) !important;
  background-color: transparent !important;
  mix-blend-mode: multiply;
}
[data-theme="atelier"] .cx-grid[data-cx-canvas-pattern="dots"] {
  background-image:
    radial-gradient(circle at 50% 50%, rgba(110,90,60,0.34) 0.7px, transparent 0.95px),
    radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), 0.2) 0.55px, transparent 0.75px) !important;
  /* background-size / position set inline for pan + zoom */
  background-color: transparent !important;
  mix-blend-mode: multiply;
}
[data-theme="atelier"] .cx-grid[data-cx-canvas-pattern="stripes"] {
  /* vertical pinstripes only (90deg = bands along x → lines run ↓) */
  background-image:
    repeating-linear-gradient(90deg,
      rgba(110,90,60,0.16) 0 1px,
      transparent 1px 8px),
    repeating-linear-gradient(90deg,
      rgba(var(--accent-rgb), 0.11) 0 1px,
      transparent 1px 22px),
    repeating-linear-gradient(90deg,
      rgba(var(--accent-2-rgb), 0.09) 0 1px,
      transparent 1px 30px) !important;
  background-color: transparent !important;
  mix-blend-mode: multiply;
}
/* Plain canvas — theme background only, no grid or weave overlay */
[data-theme="atelier"] .cx-grid[data-cx-canvas-pattern="solid"] {
  background-image: none !important;
  background-color: transparent !important;
  mix-blend-mode: normal;
}

/* selvedge ruler stripe sliding down the left edge of the canvas */
[data-theme="atelier"] .cx-canvas-wrap::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 22px;
  background:
    linear-gradient(90deg, var(--bg-2) 0 22px),
    repeating-linear-gradient(0deg,
      var(--ink) 0 1px,
      transparent 1px 8px,
      var(--accent) 8px 9px,
      transparent 9px 16px);
  background-blend-mode: normal;
  border-right: 0.5px solid var(--line);
  z-index: 1;
  pointer-events: none;
  opacity: 0.78;
}
[data-theme="atelier"] .cx-canvas-wrap::after {
  /* Rotated cm caption only — must not inherit a full-bleed ::after background (would read as a “transparency” checker). */
  content: '0 · 5 · 10 · 15 · 20 · 25 · 30 cm';
  position: absolute;
  top: 12px;
  left: -78px;
  width: 220px;
  right: auto;
  bottom: auto;
  height: auto;
  background: none;
  text-align: center;
  transform: rotate(-90deg);
  transform-origin: center;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--warm);
  z-index: 2;
  pointer-events: none;
}

/* ─────────── node — jacquard band on the header, woven hairline edge ─────────── */
[data-theme="atelier"] .cx-node {
  position: absolute;
}
[data-theme="atelier"] .cx-node-header {
  position: relative;
  overflow: hidden;
}
[data-theme="atelier"] .cx-node-header::before {
  /* 6px jacquard motif strip at the very top of every header */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 6px;
  pointer-events: none;
  opacity: 1;
}
[data-theme="atelier"] .cx-node-header::after {
  /* running-stitch separator below the header */
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 0;
  height: 1px;
  background-image: var(--tex-stitch);
  background-size: 10px 1px;
  pointer-events: none;
  opacity: 0.7;
}
[data-theme="atelier"] .cx-node-collapsed .cx-node-header::after {
  opacity: 0;
}

/* role-specific jacquard bands (different geometric motifs per node type) */
[data-theme="atelier"] .cx-node-product .cx-node-header::before {
  /* dot field — like printed swatch dots */
  background:
    radial-gradient(circle, var(--accent) 0.8px, transparent 1.2px) 0 0/6px 4px,
    var(--accent);
  background-size: 6px 4px, 100% 100%;
}
[data-theme="atelier"] .cx-node-craft .cx-node-header::before {
  /* satin stitch — long horizontal strokes */
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.6) 0 1px,
      transparent 1px 3px),
    var(--accent-2);
}
[data-theme="atelier"] .cx-node-fabric .cx-node-header::before {
  /* twill diagonal */
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.55) 0 1px,
      transparent 1px 4px),
    #8b5a8c;
}
[data-theme="atelier"] .cx-node-motif .cx-node-header::before {
  /* tiny diamonds — a folk pattern */
  background:
    linear-gradient(45deg, transparent 46%, rgba(58,47,38,0.55) 46% 54%, transparent 54%) 0 0/6px 6px,
    linear-gradient(-45deg, transparent 46%, rgba(58,47,38,0.55) 46% 54%, transparent 54%) 0 0/6px 6px,
    var(--accent-3);
}
[data-theme="atelier"] .cx-node-layout .cx-node-header::before {
  /* tartan check */
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.55) 0 1px,
      transparent 1px 3px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.55) 0 1px,
      transparent 1px 3px),
    #3f5fa8;
}
[data-theme="atelier"] .cx-node-airender .cx-node-header::before {
  /* micro grid — lens / render plane */
  background:
    linear-gradient(90deg, rgba(255,255,255,0.4) 0 1px, transparent 1px 5px) 0 0/5px 100%,
    linear-gradient(0deg, rgba(255,255,255,0.35) 0 1px, transparent 1px 5px) 0 0/100% 5px,
    #0d9488;
}
[data-theme="atelier"] .cx-node-output .cx-node-header::before {
  /* herringbone */
  background:
    repeating-linear-gradient(60deg,
      rgba(255,255,255,0.55) 0 1px,
      transparent 1px 3px),
    repeating-linear-gradient(-60deg,
      rgba(255,255,255,0.55) 0 1px,
      transparent 1px 3px),
    var(--ink);
}

/* node body subtle weave fill — only catches the eye when zoomed in */
[data-theme="atelier"] .cx-node-body {
  position: relative;
}
[data-theme="atelier"] .cx-node-body::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--tex-weave-tiny);
  background-size: 4px 4px;
  opacity: 0.35;
  pointer-events: none;
  border-radius: inherit;
}
[data-theme="atelier"] .cx-node-body > * { position: relative; z-index: 1; }

/* ─────────── ports — tiny bobbins ─────────── */
[data-theme="atelier"] .cx-port {
  box-shadow:
    inset 0 0 0 1px rgba(58,47,38,0.18),
    0 0 0 3px var(--paper);
}
[data-theme="atelier"] .cx-port::after {
  /* center thread mark */
  content: '';
  position: absolute;
  inset: 35%;
  background: var(--paper);
  border-radius: 50%;
  opacity: 0.55;
}

/* ─────────── wires — yarn-like dashed flow ─────────── */
[data-theme="atelier"] .cx-wire {
  stroke-dasharray: 8 4;
  stroke-linecap: round;
  stroke-width: 1.8 !important;
  opacity: 0.7 !important;
  animation: cx-yarn-flow 14s linear infinite;
}
[data-theme="atelier"] .cx-wire.fab {
  stroke-dasharray: 4 3 1 3;
  stroke-width: 1.6 !important;
}
@keyframes cx-yarn-flow {
  to { stroke-dashoffset: -240; }
}

/* ─────────── decorative woven swatch in canvas corner ─────────── */
.cx-fabric-tag {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* ─────────── sidebar — selvedge separator + woven section heads ─────────── */
[data-theme="atelier"] .cx-sidebar {
  position: relative;
  background-image:
    linear-gradient(90deg, transparent 0 calc(100% - 8px), var(--bg-2) calc(100% - 8px) 100%),
    repeating-linear-gradient(0deg,
      rgba(184,169,136,0.18) 0 1px,
      transparent 1px 5px);
  background-blend-mode: multiply;
}
[data-theme="atelier"] .cx-sidebar::after {
  /* right-edge selvedge */
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 4px;
  background:
    repeating-linear-gradient(0deg,
      var(--accent) 0 2px,
      transparent 2px 7px,
      var(--accent-2) 7px 8px,
      transparent 8px 14px);
  opacity: 0.7;
  pointer-events: none;
}
[data-theme="atelier"] .cx-side-h {
  position: relative;
}
[data-theme="atelier"] .cx-side-h::after {
  content: '';
  display: block;
  margin-top: 6px;
  height: 2px;
  background-image: var(--tex-stitch);
  background-size: 8px 2px;
  opacity: 0.55;
}

/* ─────────── preview — woven bg, vessel framed like cloth ─────────── */
[data-theme="atelier"] .cx-preview {
  position: relative;
}
[data-theme="atelier"] .cx-preview-collapsed::before {
  display: none;
}
[data-theme="atelier"] .cx-preview::before {
  /* left-edge selvedge */
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background:
    repeating-linear-gradient(0deg,
      var(--accent-2) 0 2px,
      transparent 2px 7px,
      var(--accent) 7px 8px,
      transparent 8px 14px);
  opacity: 0.7;
  pointer-events: none;
}
[data-theme="atelier"] .cx-prev-area {
  background-image:
    var(--tex-weave-tiny);
  background-size: 4px 4px, 4px 4px;
  background-color: var(--bg-1);
}
[data-theme="atelier"] .cx-prev-vessel {
  position: relative;
}
[data-theme="atelier"] .cx-prev-vessel::before {
  /* hem stitch around the cushion */
  content: '';
  position: absolute;
  inset: 8px;
  border: 0.5px dashed rgba(58,47,38,0.30);
  border-radius: 16px;
  pointer-events: none;
}
[data-theme="atelier"] .cx-prev-vessel::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--tex-weave-tiny);
  background-size: 3px 3px;
  opacity: 0.35;
  border-radius: inherit;
  pointer-events: none;
}

[data-theme="atelier"] .cx-prev-tp {
  position: relative;
}
[data-theme="atelier"] .cx-prev-tp::before {
  content: '';
  position: absolute;
  left: 16px; right: 16px; top: 0;
  height: 2px;
  background-image: var(--tex-stitch);
  background-size: 10px 2px;
  opacity: 0.55;
}

/* small woven pill behind nav links */
[data-theme="atelier"] .cx-navlink.active {
  position: relative;
}
[data-theme="atelier"] .cx-navlink.active::after {
  content: '';
  position: absolute;
  left: 8px; right: 8px; bottom: 4px;
  height: 2px;
  background-image:
    repeating-linear-gradient(90deg,
      var(--accent) 0 2px,
      transparent 2px 4px);
  opacity: 0.85;
}

/* fabric row swatches — add subtle weave overlay */
[data-theme="atelier"] .cx-fabric-sw {
  position: relative;
  overflow: hidden;
}
[data-theme="atelier"] .cx-fabric-sw::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--tex-weave-tiny);
  background-size: 3px 3px;
  opacity: 0.6;
  mix-blend-mode: multiply;
}

/* tiles — woven feel on product tiles */
[data-theme="atelier"] .cx-tile {
  position: relative;
}
[data-theme="atelier"] .cx-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--tex-weave-tiny);
  background-size: 4px 4px;
  opacity: 0.25;
  pointer-events: none;
  border-radius: inherit;
}
[data-theme="atelier"] .cx-tile.sel::after {
  opacity: 0;
}

/* tech-pack modal: stitched border + jacquard band on top */
[data-theme="atelier"] .cx-modal-card {
  position: relative;
  border: 0.5px solid var(--line-strong);
}
[data-theme="atelier"] .cx-modal-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 6px;
  background:
    repeating-linear-gradient(90deg,
      var(--accent) 0 4px,
      var(--accent-2) 4px 8px,
      var(--accent-3) 8px 12px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.5) 0 1px,
      transparent 1px 3px);
  background-size: 100% 4px, 100% 100%;
  background-position: 0 0, 0 0;
  background-repeat: repeat-x;
  border-radius: inherit;
}