/* =========================================================================
   Codemeta OS — Ad creative base styles
   Single source of truth for typography, colors, common ad components.
   Each ad sets its own canvas size; this file provides building blocks.
   ========================================================================= */

@import url('../../assets/colors_and_type.css');

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; }
body {
  font-family: var(--cm-font-body);
  color: var(--cm-teal-ink);
  background: #1a1a1a; /* dark surround so the ad pops */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

/* The actual ad canvas. Each page sets its own width/height. */
.ad-canvas {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  background: var(--cm-white);
}

/* When the page is opened standalone, center the canvas in the viewport */
@media screen {
  body.standalone {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
}

/* ---------- Codemeta logo lockup (compact) ---------- */
.cm-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cm-font-display);
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1;
}
.cm-logo img.mark {
  height: 1.1em;
  width: auto;
  display: block;
}
.cm-logo .lockup {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.cm-logo .w-code { color: var(--cm-teal-ink); }
.cm-logo .w-meta { color: var(--cm-green); }
.cm-logo .os-tag {
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0.18em;
  background: var(--cm-teal-ink);
  color: #fff;
  padding: 0.32em 0.55em;
  border-radius: 0.3em;
  align-self: center;
  transform: translateY(-0.05em);
}
.cm-logo.invert .w-code { color: #fff; }
.cm-logo.invert .os-tag { background: var(--cm-green); color: #fff; }

/* ---------- Reusable ad components ---------- */
.cm-eyebrow {
  font-family: var(--cm-font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cm-green-deep);
}

.cm-headline {
  font-family: var(--cm-font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--cm-teal-ink);
  text-wrap: balance;
}
.cm-headline .green { color: var(--cm-green); }
.cm-headline .strike { text-decoration: line-through; text-decoration-thickness: 0.06em; opacity: 0.55; }

.cm-sub {
  font-family: var(--cm-font-body);
  color: var(--cm-fg-2);
  line-height: 1.5;
}

.cm-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cm-font-display);
  font-weight: 700;
  background: var(--cm-green);
  color: #fff;
  padding: 14px 22px;
  border-radius: 999px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.cm-cta .arrow {
  display: inline-block;
  transform: translateY(-1px);
}

.cm-url {
  font-family: var(--cm-font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--cm-fg-3);
}

/* Trust strip — reusable */
.cm-trust {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--cm-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--cm-fg-3);
}
.cm-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cm-trust .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cm-green);
  display: inline-block;
}

/* "Tools strikethrough" visual */
.cm-tools {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.cm-tools .tool {
  font-family: var(--cm-font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 11px;
  border-radius: 6px;
  background: var(--cm-gray-50);
  color: var(--cm-fg-2);
  border: 1px solid var(--cm-border);
  position: relative;
}
.cm-tools .tool.struck::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px;
  top: 50%;
  height: 1.5px;
  background: var(--cm-coral);
  transform: rotate(-3deg);
}

/* Generic UI mockup chrome */
.ui-window {
  background: var(--cm-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(14, 59, 67, 0.18), 0 4px 12px rgba(14, 59, 67, 0.08);
  border: 1px solid var(--cm-border);
}
.ui-titlebar {
  height: 32px;
  background: var(--cm-paper);
  border-bottom: 1px solid var(--cm-border);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
}
.ui-titlebar .traffic {
  display: flex;
  gap: 5px;
}
.ui-titlebar .traffic span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--cm-gray-200);
  display: inline-block;
}
.ui-titlebar .traffic span:first-child { background: #ff5f56; }
.ui-titlebar .traffic span:nth-child(2) { background: #ffbd2e; }
.ui-titlebar .traffic span:nth-child(3) { background: #27c93f; }
.ui-titlebar .url {
  font-family: var(--cm-font-mono);
  font-size: 11px;
  color: var(--cm-fg-3);
  margin-left: auto;
  margin-right: auto;
  background: var(--cm-white);
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--cm-border);
}

/* Module-grid mini (small UI mockup) */
.mini-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.mini-grid .cell {
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--cm-gray-50);
  border: 1px solid var(--cm-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cm-font-display);
  font-weight: 700;
  font-size: 10px;
  color: var(--cm-fg-2);
}
.mini-grid .cell.green {
  background: var(--cm-green);
  color: #fff;
  border-color: var(--cm-green);
}
.mini-grid .cell.dark {
  background: var(--cm-teal-ink);
  color: #fff;
  border-color: var(--cm-teal-ink);
}

/* Diagonal accent stripe (used as decorative element on dark ads) */
.cm-stripe {
  position: absolute;
  background: var(--cm-green);
  transform-origin: center;
  pointer-events: none;
}

/* Big stat */
.cm-stat {
  font-family: var(--cm-font-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--cm-green);
}