/*
  AnyBoost UI — shared design layer.
  Source of truth: the /lp "全体像" funnel overview section.
  Spec: docs/product/design-system.md. Prefix every class with `ab-`.
*/

:root {
  /* Color — ink and text */
  --ab-ink: #17191d;
  --ab-muted: #53647a;
  --ab-subtle: #8a97a8;
  --ab-faint: #9aa6b6;

  /* Color — brand */
  --ab-primary: #1f63e9;
  --ab-primary-dark: #1347b8;
  --ab-primary-soft: #edf4ff;
  --ab-cyan: #69cef2;
  --ab-accent: #ffb942;
  --ab-positive: #078a65;
  --ab-positive-dot: #08a978;
  --ab-negative: #c2410c;

  /* Color — surfaces and lines */
  --ab-canvas: #fbfcfe;
  --ab-surface: #ffffff;
  --ab-panel: #f4f6f9;
  --ab-field: #f7f9fc;
  --ab-border: #e3e9f1;
  --ab-border-strong: #dfe6ef;
  --ab-track: #e2e7ee;
  --ab-connector: #ccd6e2;

  /* Color — funnel scale (top → bottom) */
  --ab-funnel-1: #e6effc;
  --ab-funnel-1-ink: #345077;
  --ab-funnel-2: #c9dcfa;
  --ab-funnel-2-ink: #1f416f;
  --ab-funnel-3: #93b8f5;
  --ab-funnel-3-ink: #10305e;
  --ab-funnel-4: #4f8ef0;
  --ab-funnel-4-ink: #ffffff;
  --ab-funnel-5: #1347b8;
  --ab-funnel-5-ink: #ffffff;
  --ab-gradient-ai: linear-gradient(135deg, var(--ab-primary), var(--ab-cyan));

  /* Type */
  --ab-font: Inter, "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --ab-text-label: 11px;
  --ab-text-caption: 10.5px;
  --ab-text-small: 12.5px;
  --ab-text-body: 14px;
  --ab-text-title: 15.5px;
  --ab-text-value: 28px;
  --ab-text-heading: 28px;

  /* Shape */
  --ab-radius-xs: 8px;
  --ab-radius-sm: 12px;
  --ab-radius-md: 15px;
  --ab-radius-lg: 22px;
  --ab-radius-xl: 30px;
  --ab-radius-pill: 999px;

  /* Elevation */
  --ab-shadow-xs: 0 1px 2px rgba(23, 25, 29, .05);
  --ab-shadow-sm: 0 6px 18px rgba(23, 53, 95, .06);
  --ab-shadow-hover: 0 18px 40px rgba(23, 53, 95, .08);
  --ab-shadow-float: 0 30px 70px rgba(23, 53, 95, .12);

  /* Spacing (4px base) */
  --ab-space-1: 4px;
  --ab-space-2: 8px;
  --ab-space-3: 12px;
  --ab-space-4: 16px;
  --ab-space-5: 20px;
  --ab-space-6: 24px;
  --ab-space-8: 32px;
  --ab-space-12: 48px;

  /* Motion */
  --ab-ease: .2s ease;
  --ab-focus: 0 0 0 3px rgba(31, 99, 233, .28);
}

/* Utilities */
.ab-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ab-eyebrow { margin: 0; color: var(--ab-primary); font-size: var(--ab-text-label); font-weight: 850; letter-spacing: .16em; }
.ab-glow { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(31, 99, 233, .07), transparent 68%); pointer-events: none; }

/* Card: white, hairline border, 22px radius, inner panel + numbered title */
.ab-card { padding: var(--ab-space-3) var(--ab-space-3) var(--ab-space-5); border: 1px solid var(--ab-border); border-radius: var(--ab-radius-lg); background: var(--ab-surface); box-shadow: var(--ab-shadow-xs); }
.ab-card--interactive { transition: transform var(--ab-ease), box-shadow var(--ab-ease); }
.ab-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--ab-shadow-hover); }
.ab-card--float { border-radius: var(--ab-radius-xl); background: linear-gradient(180deg, #fff 0%, #f3f7fd 100%); box-shadow: var(--ab-shadow-float); }
.ab-card__title { display: flex; align-items: center; margin: 17px var(--ab-space-2) 0; color: var(--ab-ink); font-size: var(--ab-text-title); font-weight: 800; letter-spacing: -.01em; }
.ab-card__desc { margin: 5px var(--ab-space-2) 0; color: var(--ab-muted); font-size: var(--ab-text-small); line-height: 1.75; }
.ab-num { margin-right: 10px; color: var(--ab-faint); font-size: var(--ab-text-label); font-weight: 700; letter-spacing: .04em; }

/* Panel: the grey inset that holds a card's visual */
.ab-panel { border-radius: var(--ab-radius-md); background: var(--ab-panel); }

/* Chip: small white pill used inside panels */
.ab-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 5px 11px; border-radius: var(--ab-radius-pill); background: var(--ab-surface); color: var(--ab-ink); font-size: var(--ab-text-caption); font-weight: 700; box-shadow: var(--ab-shadow-xs); }
.ab-chip--outline { border: 1px solid var(--ab-border-strong); background: var(--ab-field); color: var(--ab-muted); box-shadow: none; }
.ab-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ab-positive-dot); box-shadow: 0 0 0 4px rgba(8, 169, 120, .14); }

/* Logo: white circle with a masked monochrome mark tinted by --brand */
.ab-logo { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--ab-surface); box-shadow: 0 2px 6px rgba(23, 25, 29, .08); }
.ab-logo::before, .ab-mark { content: ""; display: block; background: var(--brand); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.ab-logo::before { position: absolute; inset: 11px; }
.ab-logo--sm { width: 30px; height: 30px; }
.ab-logo--sm::before { inset: 7px; }
.ab-logo.is-connected::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border: 2px solid var(--ab-panel); border-radius: 50%; background: var(--ab-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.ab-logo--sm.is-connected::after { width: 13px; height: 13px; }
.ab-mark { width: 14px; height: 14px; flex: 0 0 auto; }
.ab-brand-google { --logo: url("/assets/demo2-googleads.svg"); --brand: #4285f4; }
.ab-brand-meta { --logo: url("/assets/demo2-meta.svg"); --brand: #0866ff; }
.ab-brand-line { --logo: url("/assets/demo2-line.svg"); --brand: #06c755; }
.ab-brand-youtube { --logo: url("/assets/demo2-youtube.svg"); --brand: #ff0033; }
.ab-brand-ga { --logo: url("/assets/landing-googleanalytics.svg"); --brand: #e37400; }
.ab-brand-gtm { --logo: url("/assets/landing-googletagmanager.svg"); --brand: #246fdb; }
.ab-brand-hubspot { --logo: url("/assets/landing-hubspot.svg"); --brand: #ff7a59; }

/* Bar: track + fill. Width comes from a class that sets --w */
.ab-bar { position: relative; display: block; height: 6px; border-radius: var(--ab-radius-pill); background: var(--ab-track); overflow: hidden; }
.ab-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: inherit; background: var(--ab-ink); }
.ab-bar--primary::after { background: var(--ab-primary); }

/* Toggle (display only) */
.ab-toggle { position: relative; display: inline-block; width: 28px; height: 16px; border-radius: var(--ab-radius-pill); background: var(--ab-ink); }
.ab-toggle::after { content: ""; position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }

/* Buttons */
.ab-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--ab-radius-pill); font: inherit; font-size: 12.5px; font-weight: 750; cursor: pointer; transition: transform var(--ab-ease), background var(--ab-ease), border-color var(--ab-ease); }
.ab-btn:hover { transform: translateY(-1px); }
.ab-btn:disabled { cursor: default; opacity: .5; transform: none; }
.ab-btn--primary { background: var(--ab-ink); color: #fff; }
.ab-btn--ghost { border-color: var(--ab-border-strong); background: var(--ab-surface); color: var(--ab-ink); }
.ab-btn--chip { min-height: 28px; padding: 0 11px; border-color: var(--ab-border-strong); background: var(--ab-field); color: var(--ab-muted); font-size: var(--ab-text-caption); font-weight: 700; }
.ab-btn--chip:hover { border-color: var(--ab-primary); color: var(--ab-primary); }
.ab-send { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--ab-ink); cursor: pointer; }
.ab-send svg, .ab-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-send svg { stroke: #fff; }

/* AI identity */
.ab-avatar-ai { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--ab-gradient-ai); color: #fff; font-size: 9.5px; font-weight: 850; letter-spacing: -.02em; }
.ab-badge-ai { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid var(--ab-border); border-radius: 50%; background: #fff; box-shadow: 0 12px 26px rgba(23, 53, 95, .14); color: var(--ab-primary); font-size: 17px; font-weight: 850; }
.ab-badge-ai::before { content: ""; position: absolute; top: 13px; right: 14px; width: 7px; height: 7px; background: var(--ab-accent); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

/* Conversation */
.ab-bubble { margin: 0; padding: 9px 14px; border-radius: 16px; background: var(--ab-surface); color: var(--ab-ink); font-size: 13px; line-height: 1.75; box-shadow: var(--ab-shadow-xs); overflow-wrap: anywhere; }
.ab-bubble--user { background: var(--ab-ink); color: #fff; box-shadow: none; }

/* Composer: pill input with a round ink send button */
.ab-composer { display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 16px; border: 1px solid var(--ab-border-strong); border-radius: var(--ab-radius-pill); background: var(--ab-surface); box-shadow: var(--ab-shadow-sm); }
.ab-composer:focus-within { border-color: var(--ab-primary); }
.ab-composer input { flex: 1; min-width: 0; padding: 7px 0; border: 0; background: transparent; color: var(--ab-ink); font: inherit; font-size: 13px; outline: none; }
.ab-composer input::placeholder { color: var(--ab-faint); }

/* Funnel band: stacked trapezoids; a parent sets --t / --b insets per step */
.ab-funnel-band { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; clip-path: polygon(var(--t, 0%) 0, calc(100% - var(--t, 0%)) 0, calc(100% - var(--b, 0%)) 100%, var(--b, 0%) 100%); }
.ab-funnel-band--1 { background: var(--ab-funnel-1); color: var(--ab-funnel-1-ink); }
.ab-funnel-band--2 { background: var(--ab-funnel-2); color: var(--ab-funnel-2-ink); }
.ab-funnel-band--3 { background: var(--ab-funnel-3); color: var(--ab-funnel-3-ink); }
.ab-funnel-band--4 { background: var(--ab-funnel-4); color: var(--ab-funnel-4-ink); }
.ab-funnel-band--5 { background: var(--ab-funnel-5); color: var(--ab-funnel-5-ink); }

/* Impact size: AI-assigned XS–XL label */
.ab-impact { display: inline-grid; place-items: center; flex: 0 0 auto; min-width: 28px; height: 20px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; font-size: 10.5px; font-weight: 850; letter-spacing: .02em; line-height: 1; }
.ab-impact--xs { border-color: #dfe4ea; background: #f3f5f8; color: #5b6573; }
.ab-impact--s { border-color: #c4ecdc; background: #e8f8f1; color: #057152; }
.ab-impact--m { border-color: #cddffd; background: #edf4ff; color: #1f63e9; }
.ab-impact--l { border-color: #ddd0fb; background: #f3eeff; color: #6b3fd4; }
.ab-impact--xl { border-color: #fbd3bd; background: #fff1e8; color: #c2410c; }

/* Stat */
.ab-stat-label { color: var(--ab-muted); font-size: 12px; font-weight: 700; }
.ab-stat-value { color: var(--ab-ink); font-size: var(--ab-text-value); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.ab-stat-value small { margin-left: 3px; color: var(--ab-subtle); font-size: 13px; font-weight: 700; letter-spacing: 0; }
.ab-positive { color: var(--ab-positive); }

@media (prefers-reduced-motion: reduce) {
  .ab-card--interactive, .ab-btn { transition: none; }
}