/* "Automation examples" look (glass cards on a lilac field with blue glass slabs).
   Used by the workflow pages: /workflows (template cards) and /workflows/{id} (canvas nodes). */

:root {
  --ax-ink: #000;
  --ax-muted: rgba(0, 0, 0, .6);
  --ax-line: rgba(0, 0, 0, .1);
  --ax-purple: #6904f2;
  --ax-field: #eeebf2;
  --ax-card: rgba(255, 255, 255, .8);
  --ax-sans: "Be Vietnam Pro", "Instrument Sans", system-ui, sans-serif;
  --ax-label: "IBM Plex Sans", system-ui, sans-serif;
}

/* ------------------------------------------------------------ section + glass background */
.ax-section { position: relative; overflow: hidden; background: var(--ax-field); border-radius: 28px; padding: 64px 50px 56px;
  font-family: var(--ax-sans); color: var(--ax-ink); margin-bottom: 20px; isolation: isolate; }
.ax-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ax-slab { position: absolute; border-radius: 30px;
  background: linear-gradient(120deg, #e9edff 0%, #a9b9ff 16%, #5b7bff 38%, #2447ff 62%, #1030f0 82%, #6d86ff 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6), inset 24px 24px 50px rgba(255, 255, 255, .35), inset -20px -30px 60px rgba(8, 20, 160, .35),
    0 50px 90px rgba(36, 60, 230, .28); }
.ax-slab::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent 0 55%, rgba(255, 255, 255, .5) 58%, transparent 62%); mix-blend-mode: soft-light; }
.ax-slab.s1 { width: 230px; height: 640px; right: 40px; top: -150px; transform: rotate(40deg); }
.ax-slab.s2 { width: 210px; height: 560px; left: 44%; top: 120px; transform: rotate(50deg); }
.ax-slab.s3 { width: 180px; height: 500px; left: 2%; top: 260px; transform: rotate(-30deg); }
.ax-inner { position: relative; }

.ax-eyebrow { font-family: var(--ax-label); font-size: 12px; line-height: 15.6px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; }
.ax-title { font-family: var(--ax-sans); font-size: 46px; line-height: 1; font-weight: 500; letter-spacing: -.02em; margin: 10px 0 10px; color: var(--ax-ink); }
.ax-sub { font-size: 16px; line-height: 22.4px; margin: 0 0 42px; }
.ax-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ax-head .ax-sub { margin-bottom: 42px; }
.ax-head > .ax-btn { margin-bottom: 42px; }

/* ------------------------------------------------------------ cards */
.ax-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ax-card { position: relative; display: flex; flex-direction: column; gap: 10px 20px; padding: 30px; border-radius: 20px;
  background: var(--ax-card); border: 1px solid var(--ax-line); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  color: var(--ax-ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
a.ax-card:hover, .ax-card.link:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(40, 50, 120, .12); }
.ax-card .ax-cover { position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.ax-card > *:not(.ax-cover) { position: relative; z-index: 1; }
.ax-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.ax-tag { background: #fff; border-radius: 20px; padding: 6px 15px; box-shadow: 0 2px 2px rgba(0, 0, 0, .01);
  font-family: var(--ax-label); font-size: 12px; line-height: 15.6px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.ax-tag.on { background: var(--ax-ink); color: #fff; }
.ax-tag.off { color: var(--ax-muted); }
.ax-card-title { font-family: var(--ax-sans); font-size: 20px; line-height: 28px; font-weight: 500; margin: 0; }
.ax-div { border: 0; border-top: 1px solid var(--ax-line); margin: 15px 0 15px; }
.ax-row { display: grid; grid-template-columns: 95px minmax(0, 1fr); gap: 10px; align-items: baseline; margin-bottom: 5px; min-height: 31px; }
.ax-k { font-family: var(--ax-label); font-size: 12px; line-height: 15.6px; text-transform: uppercase; color: var(--ax-muted); }
.ax-v { font-size: 14px; line-height: 19.6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-v .ax-arrow { margin: 0 4px; }
.ax-res { display: flex; align-items: center; gap: 0; color: var(--ax-purple); font-size: 15px; line-height: 16.5px; font-weight: 500; }
.ax-res svg { width: 18px; height: 18px; flex: none; margin-right: 5px; fill: var(--ax-purple); }
.ax-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 14px; flex-wrap: wrap; }
.ax-card form { margin: 0; }

/* ------------------------------------------------------------ pill buttons (black primary / white secondary) */
.ax-btn { display: inline-flex; align-items: center; gap: 12px; border-radius: 999px; border: 1px solid var(--ax-ink); background: var(--ax-ink); color: #fff;
  font-family: var(--ax-sans); font-size: 16px; font-weight: 500; line-height: 1; padding: 16px 26px; cursor: pointer; text-decoration: none; letter-spacing: -.01em;
  transition: background .2s, color .2s; }
.ax-btn:hover { background: #222; color: #fff; }
.ax-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.ax-btn.light { background: #fff; color: var(--ax-ink); border-color: #fff; }
.ax-btn.light:hover { background: #f4f2f8; }
.ax-btn.sm { font-size: 13px; padding: 9px 16px; gap: 8px; }
.ax-btn.sm svg { width: 14px; height: 14px; }
.ax-btn.ghost { background: transparent; color: var(--ax-ink); border-color: var(--ax-line); }
.ax-btn.ghost:hover { background: #fff; }
.ax-btn.danger { background: transparent; color: #c62828; border-color: rgba(198, 40, 40, .3); }

/* new-template card */
.ax-card.ax-new { border-style: dashed; border-color: rgba(0, 0, 0, .18); background: rgba(255, 255, 255, .55); }
.ax-card input[type=text], .ax-card select { width: 100%; font-family: var(--ax-sans); font-size: 14px; border: 1px solid var(--ax-line);
  border-radius: 12px; padding: 10px 12px; background: #fff; }
.ax-field .ax-k { font-weight: 400; }
.ax-field { display: grid; grid-template-columns: 95px minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 8px; }

@media (max-width: 1200px) { .ax-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ax-section { padding: 36px 18px; border-radius: 20px; }
  .ax-title { font-size: 34px; }
  .ax-grid { grid-template-columns: 1fr; }
}