/* ==========================================================================
   OpenClicks Design System — components.css
   Class-based implementation of every component used on the marketing site.
   Depends on tokens.css. Framework-agnostic; port the rules into whatever
   styling layer the app uses (CSS Modules, Tailwind @layer, styled-components).
   ========================================================================== */

/* --------------------------------------------------------------------------
   BUTTONS
   Every button in the system is a pill. Three variants only.
   -------------------------------------------------------------------------- */

.oc-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-size: 16px; font-weight: var(--fw-strong);
  padding: 16px 28px; border-radius: var(--r-pill); border: none;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.oc-btn--sm { font-size: 14.5px; padding: 11px 20px; gap: 7px; }

/* Primary: ink fill. The default CTA on LIGHT backgrounds. */
.oc-btn--primary { background: var(--ink); color: #fff; }
.oc-btn--primary:hover { background: var(--ink2); }
.oc-btn--primary .oc-btn__arrow { color: var(--acc); }

/* Accent: accent fill. The default CTA on DARK (--ink) backgrounds.
   Never place accent-on-light and ink-on-light CTAs side by side. */
.oc-btn--accent { background: var(--acc); color: var(--ink); font-weight: 700; }
.oc-btn--accent:hover { background: var(--acc-hover); }

/* Ghost: outlined, always secondary. */
.oc-btn--ghost { background: var(--surface-card); border: 1px solid var(--border-3); color: var(--ink); font-weight: var(--fw-semi); padding: 15px 24px; }
.oc-btn--ghost:hover { border-color: var(--ink); }
.oc-btn--ghost-dark { background: transparent; border: 1px solid var(--ink2); color: #fff; }
.oc-btn--ghost-dark:hover { border-color: var(--acc); }

/* Arrow nudges right on hover — present on nearly every primary CTA. */
.oc-btn__arrow { display: inline-flex; transition: transform var(--dur-mid) ease; }
.oc-btn:hover .oc-btn__arrow { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   CHIPS, BADGES, EYEBROWS
   -------------------------------------------------------------------------- */

/* Pill chip — used for the hero badge and the feature sub-nav. */
.oc-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-card); border: 1px solid var(--border-3);
  border-radius: var(--r-pill); padding: 9px 16px;
  font-size: var(--fs-meta); font-weight: var(--fw-semi); color: var(--text-body);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.oc-chip:hover { border-color: var(--ink); color: var(--ink); }
.oc-chip--active { background: var(--ink); border-color: var(--ink); color: #fff; }
/* :hover is a class-level selector, so it outranks --active and was repainting
   the active chip's label in ink — dark text on the dark pill, invisible.
   The active chip needs its own hover, lifted slightly so it still responds. */
.oc-chip--active:hover { background: var(--ink2); border-color: var(--ink2); color: #fff; }

/* Hero badge — chip with a shadow and an animated icon. */
.oc-badge-hero {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--surface-card); border: 1px solid var(--border-3);
  border-radius: var(--r-pill); padding: 7px 16px 7px 12px;
  font-size: 12.5px; font-weight: var(--fw-semi); letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-body); box-shadow: var(--sh-chip);
}
.oc-badge-hero__icon { color: var(--deep); display: inline-flex; animation: ocFloat 3.4s ease-in-out infinite; }

/* Accent badge — "Most popular", "3 months free", "Featured". */
.oc-badge-accent {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--acc); color: var(--ink); border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  padding: 6px 12px;
}

/* Section eyebrow — mono-adjacent uppercase label above every h2. */
.oc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow); color: var(--text-subtle);
}
.oc-eyebrow__icon { color: var(--deep); }

/* Mono meta label — table headers, timestamps, step numbers. */
.oc-mono {
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono); color: var(--text-faint);
}
.oc-mono--upper { text-transform: uppercase; letter-spacing: .14em; }

/* --------------------------------------------------------------------------
   MARKER HIGHLIGHT
   The signature device: a tilted accent block behind one or two words of a
   headline. Use ONCE per page, in the h1 only.
   -------------------------------------------------------------------------- */

.oc-mark { position: relative; display: inline-block; padding: 0 .1em; }
.oc-mark::before {
  content: ""; position: absolute; left: 0; right: 0; top: 8%; bottom: 8%;
  background: var(--acc); transform: rotate(-1.4deg); border-radius: 6px; z-index: 0;
}
.oc-mark > * , .oc-mark { position: relative; }
.oc-mark__text { position: relative; z-index: 1; }

/* Italic emphasis — the other headline device. Lowercase, medium weight,
   accent-coloured on dark surfaces. Pairs with, never replaces, .oc-mark. */
.oc-em { font-style: italic; font-weight: var(--fw-medium); }
.oc-em--accent { color: var(--acc); }

/* --------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */

.oc-card {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 28px;
  transition: transform var(--dur-mid) ease, box-shadow var(--dur-mid) ease;
}
.oc-card:hover { transform: translateY(-6px); box-shadow: var(--sh-card); }
.oc-card--on-tint { border-color: var(--border-2); }
.oc-card--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.oc-card--dark:hover { box-shadow: none; }
.oc-card--accent { background: var(--acc); border-color: var(--acc); color: var(--ink); }
/* Exactly ONE card per grid should be --dark or --accent. Two is noise. */

.oc-card__soon {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  padding: 4px 10px;
  margin-top: 18px;
  opacity: .55;
}
.oc-card__soon + .oc-card__title,
.oc-card__soon + .oc-doccard__title { margin-top: 10px; }
.oc-card__title { font-size: var(--fs-card-title); font-weight: var(--fw-heavy); letter-spacing: var(--ls-card-title); margin: 20px 0 8px; }
.oc-card__body { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--text-muted); margin: 0; }
.oc-card--dark .oc-card__body { color: var(--text-on-dark); }

/* Icon tile — 46px rounded square, tinted background, saturated icon.
   Rotate-and-scale on card hover is what makes the grid feel alive. */
.oc-icon-tile {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--soft); color: var(--deep);
}
.oc-icon-tile--dark { background: var(--acc); color: var(--ink); }
.oc-icon-tile > * { transition: transform .35s var(--ease-pop); }
.oc-card:hover .oc-icon-tile > * { transform: rotate(-9deg) scale(1.14); }
/* Cycle the five semantic chip colours across an icon grid — green, amber,
   teal, coral, violet, blue — rather than tinting everything with the accent. */

/* --------------------------------------------------------------------------
   HEADER + STICKY SUB-NAV
   -------------------------------------------------------------------------- */

.oc-announce {
  background: var(--ink); color: #fff; font-size: 13px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 20px; text-align: center;
}
.oc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); animation: ocPulse 2s ease-in-out infinite; display: inline-block; }

.oc-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(255,255,255,.86); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-header);
}
.oc-header__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  height: var(--header-h); display: flex; align-items: center; gap: 30px;
  white-space: nowrap;
}
.oc-nav { display: flex; align-items: center; gap: 22px; font-size: 14.5px; font-weight: var(--fw-medium); }
.oc-nav a { color: var(--text-body); }
.oc-nav a.is-active { color: var(--ink); font-weight: var(--fw-strong); }
@media (max-width: 1140px) { .oc-header__secondary { display: none; } }
@media (max-width: 1020px) { .oc-nav { gap: 16px; font-size: 13.5px; } .oc-btn--sm { padding: 10px 16px; font-size: 13.5px; } }

/* Sub-nav sits flush under the header and scroll-spies the section in view. */
.oc-subnav {
  position: sticky; top: var(--subnav-top); z-index: var(--z-subnav);
  background: rgba(255,255,255,.9); backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-header); border-bottom: 1px solid var(--border-header);
}
.oc-subnav__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 12px var(--gutter);
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
}
/* Centred with auto margins rather than `justify-content: center`, which on a
   scroller pushes the leading chips into negative scroll space where they can
   never be reached. Auto margins collapse to zero once the strip overflows, so
   the strip starts at the scroll origin and every chip stays reachable. */
.oc-subnav__inner > :first-child { margin-inline-start: auto; }
.oc-subnav__inner > :last-child { margin-inline-end: auto; }
/* These chips are the primary way to move around the page on a phone, so they
   get a thumb-sized target the decorative chips elsewhere do not need. */
@media (max-width: 760px) {
  .oc-subnav__inner .oc-chip { min-height: 42px; }
}
.oc-subnav__inner::-webkit-scrollbar { display: none; }
.oc-subnav__inner .oc-chip { flex: none; }
/* Any section targeted by the sub-nav needs: scroll-margin-top: var(--anchor-offset); */

/* --------------------------------------------------------------------------
   SECTIONS
   Rhythm: white → tint-a → white → ink → white. Never two tinted bands in a
   row, and no more than two --ink sections per page (one mid, one closing).
   -------------------------------------------------------------------------- */

.oc-section { padding: var(--section-y) var(--gutter); }
.oc-section--tint { background: var(--tint-a); }
.oc-section--tint-warm { background: var(--tint-b); }
.oc-section--dark { background: var(--ink); color: #fff; }
.oc-section__inner { max-width: var(--maxw); margin: 0 auto; }
.oc-section__inner--narrow { max-width: var(--maxw-narrow); }

/* Hero: soft vertical wash from --hero to --base. Only on the first section. */
.oc-hero { padding: 92px var(--gutter) 72px; background: linear-gradient(180deg, var(--hero) 0%, var(--base) 100%); }

/* Closing CTA: --ink with an accent glow bleeding up from the bottom edge. */
.oc-cta-dark { padding: var(--section-y) var(--gutter) 108px; background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.oc-cta-dark__glow {
  position: absolute; inset: auto -10% -55% -10%; height: 420px; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 100%, rgba(var(--acc-rgb),.18), transparent 70%);
}
/* The footer below is also ink, so there is no seam between the two bands and
   this padding stacks with the footer's own into one large empty gap. */
@media (max-width: 760px) { .oc-cta-dark { padding-bottom: 64px; } }

/* Standard two-column section head: h2 left, supporting paragraph right. */
.oc-section-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: end; }

/* --------------------------------------------------------------------------
   TYPOGRAPHY
   -------------------------------------------------------------------------- */

.oc-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--fw-display); margin: 0; text-wrap: balance; }
.oc-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--fw-display); margin: 0; }
.oc-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-display); margin: 0; }
.oc-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-body); margin: 0; }
.oc-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); margin: 0; }
.oc-section--dark .oc-lead, .oc-section--dark .oc-body { color: var(--text-on-dark); }

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */

.oc-field { display: flex; flex-direction: column; gap: 7px; }
.oc-label { font-size: var(--fs-meta); font-weight: var(--fw-strong); color: var(--ink3); }
.oc-input {
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--surface-inset); border: 1px solid #E0E3D9;
  border-radius: 12px; padding: 13px 15px;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.oc-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(var(--acc-rgb),.4); }
/* The accent focus ring is the system's only focus treatment. Keep it. */

/* --------------------------------------------------------------------------
   MODAL
   Split layout: form on white (left, 1.08fr), value panel on --ink (right, .92fr).
   -------------------------------------------------------------------------- */

.oc-modal-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(12,16,14,.62); backdrop-filter: blur(8px);
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 24px; animation: ocFadeIn .22s ease;
}
.oc-modal {
  width: 100%; max-width: 880px; margin: auto; position: relative;
  background: var(--surface-card); border-radius: 28px; overflow: hidden;
  display: grid; grid-template-columns: 1.08fr .92fr;
  box-shadow: var(--sh-modal); animation: ocPop .32s var(--ease-out);
}
.oc-modal__close {
  position: absolute; top: 18px; right: 18px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border-2); background: rgba(255,255,255,.9);
  color: var(--text-body); display: grid; place-items: center; cursor: pointer;
}
.oc-modal__close:hover { border-color: var(--ink); color: var(--ink); }
.oc-modal__form { padding: 44px 40px 40px; }
.oc-modal__aside { background: var(--ink); color: #fff; padding: 44px 36px; position: relative; overflow: hidden; }
/* Dismiss on: overlay click, close button, Escape. All three are required. */

/* --------------------------------------------------------------------------
   DATA DISPLAY (product UI)
   -------------------------------------------------------------------------- */

/* Metric card — the KPI tile. One per row may be --dark to anchor the eye. */
.oc-metric { background: var(--surface-card); border: 1px solid var(--border); border-radius: 16px; padding: 14px; }
.oc-metric--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.oc-metric__label { font-size: 11.5px; color: var(--text-faint); }
.oc-metric__value { font-size: 25px; font-weight: var(--fw-display); letter-spacing: -.035em; margin-top: 4px; }
.oc-metric--dark .oc-metric__value { color: var(--acc); }
.oc-metric__delta { font-size: 11.5px; margin-top: 2px; color: var(--pos); }
.oc-metric__delta--neg { color: var(--neg); }
/* Deltas are semantic, not directional: falling CPC is --pos, not --neg. */

/* Data row — keyword tables, budget pacing, audit trail. */
.oc-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-inset); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px 16px; font-size: 14.5px;
}
.oc-row--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.oc-row__key { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink3); flex: 1; }

/* Progress bar — budget pacing. */
.oc-bar { height: 8px; border-radius: var(--r-pill); background: #EDEEE7; overflow: hidden; }
.oc-bar__fill { height: 100%; border-radius: var(--r-pill); background: var(--acc); }

/* AI insight strip — Gnos speaking. Always --ink, always an accent icon tile,
   always an explicit approve/dismiss pair. Never a bare notification. */
.oc-insight { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start; }
.oc-insight__icon { width: 32px; height: 32px; border-radius: 10px; background: var(--acc); color: var(--ink); display: grid; place-items: center; flex: none; }
.oc-insight__kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--acc); }
.oc-insight__body { font-size: 13.5px; line-height: 1.5; margin-top: 6px; color: #D9DFD8; }
/* The action column costs about half the width inside the phone-sized mock,
   which shreds the message into a one-word-per-line column. Stack instead. */
@media (max-width: 620px) {
  .oc-insight { flex-wrap: wrap; }
  .oc-insight > :last-child { flex-direction: row !important; width: 100%; }
  .oc-insight > :last-child > * { flex: 1; }
}

/* Chat bubbles. */
.oc-bubble-user { background: var(--ink); color: #fff; border-radius: 16px 16px 5px 16px; padding: 12px 16px; font-size: 14.5px; max-width: 78%; }
.oc-bubble-ai { background: var(--surface-card); border: 1px solid var(--border); border-radius: 5px 16px 16px 16px; padding: 13px 16px; font-size: 14.5px; line-height: 1.55; color: var(--ink3); }

/* Autonomy level indicator — four bars, filled to the active level. */
.oc-level { display: flex; gap: 4px; }
.oc-level__bar { width: 22px; height: 6px; border-radius: 3px; background: #E7E9E2; }
.oc-level__bar.is-on { background: var(--acc); }

/* --------------------------------------------------------------------------
   MOTION
   -------------------------------------------------------------------------- */

/* Scroll reveal. Set by JS: opacity 0 + translateY(20px), then cleared when
   the element enters the viewport. See reveal.js — it must listen on the real
   scroll container, which is not always window. */
.oc-reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.oc-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .oc-reveal { opacity: 1 !important; transform: none !important; transition: none; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}