/* ============================================================
   ABM Pages — GTM System section design kit
   Mistral-derived: cream paper, ember orange, hairline grid,
   mono labels, square-cornered technical detailing.
   All classes are .abm-* prefixed to avoid clashing with the
   design-canvas chrome.
   ============================================================ */

:root {
  /* paper / ink — real ABM Pages cream + warm ink */
  --abm-paper:   #F4F0EE;
  --abm-paper-2: #ECE7E1;
  --abm-paper-3: #E2DBD3;
  --abm-card:    #FFFFFF;
  --abm-ink:     #07131D;  /* brand dark */
  --abm-ink-2:   #2A1907;  /* warm brown body text */
  --abm-muted:   #68625B;
  --abm-faint:   #A39C92;

  /* hairlines */
  --abm-line:    rgba(7,19,29,0.12);
  --abm-line-2:  rgba(7,19,29,0.22);
  --abm-line-on-dark: rgba(255,255,255,0.13);

  /* brand — emerald primary, coral secondary, deep teal for the middle zone */
  --abm-ember:   #006D4E;  /* primary (emerald) */
  --abm-ember-2: #00583E;
  --abm-rust:    #0A3D2E;
  --abm-amber:   #FFA08D;  /* secondary (coral) */
  --abm-gold:    #FFC2A8;
  --abm-blue:    #0E4F54;  /* deep teal (build zone) */
  --abm-blue-2:  #0A3C40;
  --abm-ink-blue:#07131D;

  /* dark surfaces — brand ink */
  --abm-navy:    #07131D;
  --abm-navy-2:  #0C1C26;
  --abm-navy-3:  #122632;

  --abm-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --abm-sans: "Kumbh Sans", "Helvetica Neue", Arial, sans-serif;
  --abm-serif: "Literata", Georgia, "Times New Roman", serif;
  --abm-mono: "Kumbh Sans", "Helvetica Neue", Arial, sans-serif;
}

/* ---- base scope ---- */
.abm {
  font-family: var(--abm-sans);
  color: var(--abm-ink);
  background: var(--abm-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}
.abm *, .abm *::before, .abm *::after { box-sizing: border-box; }
.abm ::selection { background: var(--abm-ember); color: #fff; }

/* ---- monospace tag / eyebrow ---- */
.abm-tag {
  font-family: var(--abm-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--abm-muted);
  line-height: 1;
  white-space: nowrap;
}
.abm-tag--ink { color: var(--abm-ink); }
.abm-tag--ember { color: var(--abm-ember); }

/* chip-style tag (pill on paper-2) */
.abm-chip {
  font-family: var(--abm-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--abm-ink-2);
  background: var(--abm-paper-2);
  border: 1px solid var(--abm-line);
  padding: 6px 10px;
  white-space: nowrap;
  line-height: 1;
}
.abm-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- section header (title left, pill right) ---- */
.abm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.abm-h1 {
  font-family: var(--abm-display);
  font-size: 54px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}
.abm-h2 {
  font-family: var(--abm-display);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0;
}
.abm-sub {
  font-size: 18px;
  line-height: 1.45;
  color: var(--abm-ink-2);
  margin: 0;
  max-width: 56ch;
  text-wrap: pretty;
}

/* ---- pill button with pixel chevron ---- */
.abm-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--abm-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 13px 18px;
  border: 1px solid var(--abm-line-2);
  background: var(--abm-card);
  color: var(--abm-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.abm-btn:hover { background: var(--abm-paper-2); }
.abm-btn--dark { background: var(--abm-ink); color: #fff; border-color: var(--abm-ink); }
.abm-btn--dark:hover { background: #000; }
.abm-btn--ember { background: var(--abm-ember); color: #fff; border-color: var(--abm-ember); }
.abm-btn--ember:hover { background: var(--abm-ember-2); }
.abm-btn__chev {
  width: 12px; height: 12px; flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 3px);
  grid-template-rows: repeat(4, 3px);
}
.abm-btn__chev i { background: currentColor; }

/* ---- hairline grid frame ---- */
.abm-rule { height: 1px; background: var(--abm-line); border: 0; }
.abm-rule--2 { background: var(--abm-line-2); }

/* ============================================================
   Pixel-block panel (the orange checkerboard)
   ============================================================ */
.abm-px {
  display: grid;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.abm-px > i { display: block; }

/* connector lines layer */
.abm-wire {
  position: absolute; inset: 0;
  pointer-events: none;
}
.abm-wire path, .abm-wire line, .abm-wire polyline {
  fill: none;
  stroke: rgba(7,19,29,0.28);
  stroke-width: 1.25;
}

/* node chip placed on a grid */
.abm-node {
  position: absolute;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(7,19,29,0.14);
  color: var(--abm-ink);
  backdrop-filter: blur(2px);
}
.abm-node svg { width: 22px; height: 22px; }

/* floating UI card */
.abm-float {
  position: absolute;
  background: var(--abm-card);
  border: 1px solid rgba(7,19,29,0.10);
  box-shadow: 0 18px 40px -18px rgba(7,19,29,0.40), 0 2px 6px rgba(7,19,29,0.06);
  padding: 14px 16px;
}

/* icon tile */
.abm-itile {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--abm-paper-2);
  border: 1px solid var(--abm-line);
  color: var(--abm-ink);
  flex: 0 0 auto;
}
.abm-itile svg { width: 22px; height: 22px; }
.abm-itile--ember { background: var(--abm-ember); border-color: var(--abm-ember); color: #fff; }
.abm-itile--blue  { background: var(--abm-blue);  border-color: var(--abm-blue);  color: #fff; }
.abm-itile--amber { background: var(--abm-amber); border-color: var(--abm-amber); color: #fff; }
.abm-itile--ink   { background: var(--abm-ink);   border-color: var(--abm-ink);   color: #fff; }

/* zone token */
.abm-zone-dot { width: 9px; height: 9px; flex: 0 0 auto; }

/* layer number, mono */
.abm-num {
  font-family: var(--abm-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* dark scope helpers */
.abm-dark { background: var(--abm-navy); color: #F4F1EA; }
.abm-dark .abm-sub { color: rgba(244,241,234,0.66); }
.abm-dark .abm-tag { color: rgba(244,241,234,0.5); }
.abm-dark .abm-chip { background: rgba(255,255,255,0.04); border-color: var(--abm-line-on-dark); color: rgba(244,241,234,0.82); }
.abm-dark .abm-rule { background: var(--abm-line-on-dark); }

/* utility */
.abm-mono { font-family: var(--abm-mono); }
.abm-dim { opacity: 0.42; }
.abm-tnum { font-variant-numeric: tabular-nums; }