/* ArcadeOps coded previews - scoped .nw-preview (shared preview infrastructure).
   Self-hosted Hanken Grotesk. Icons are inline SVG baked into the partials.
   Tokens below are the mockup design system rescoped to the canvas. */
@font-face{font-family:'Hanken Grotesk';src:url('/assets/fonts/HankenGrotesk-VariableFont.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}

/* frame + fit (same mechanism as Northwind and Retail Intel; nw-fit.js drives --nw-scale) */
.cs-ao .nw-preview{display:block;width:100%;background:transparent}
.cs-ao .nw-fit{position:relative;width:100%;overflow:hidden}
.cs-ao .nw-canvas{position:absolute;top:0;left:0;transform-origin:0 0;transform:scale(var(--nw-scale,1))}

/* the artboards default to dark ink on light surfaces - block host inheritance */
.cs-ao .nw-preview .nw-canvas{color:#000;font-family:'Hanken Grotesk',system-ui,sans-serif;letter-spacing:normal;line-height:1.5;font-size:14px}
.cs-ao .nw-preview .nwi{display:inline-flex;flex:none;align-items:center;justify-content:center;vertical-align:middle}
.cs-ao .nw-preview .nwi svg{width:100%;height:100%;display:block}

/* isolate from host global.css element selectors (header{position:fixed} etc) */
.cs-ao .nw-preview header,.cs-ao .nw-preview footer,.cs-ao .nw-preview nav,.cs-ao .nw-preview aside,.cs-ao .nw-preview main,.cs-ao .nw-preview section,.cs-ao .nw-preview article{position:static;inset:auto;z-index:auto;width:auto;height:auto;background:none;border:none;padding:0;margin:0}
.cs-ao .nw-preview h1,.cs-ao .nw-preview h2,.cs-ao .nw-preview h3,.cs-ao .nw-preview h4,.cs-ao .nw-preview h5,.cs-ao .nw-preview h6{margin:0;font-weight:600;line-height:1.2;letter-spacing:normal;text-transform:none;font-family:inherit;color:inherit}
.cs-ao .nw-preview p{margin:0;font-size:inherit;line-height:inherit;color:inherit;max-width:none}
.cs-ao .nw-preview a{color:var(--brand);text-decoration:none}
.cs-ao .nw-preview button{font-family:inherit;cursor:default;letter-spacing:inherit}
.cs-ao .nw-preview table{border-collapse:collapse;width:auto}
.cs-ao .nw-preview *,.cs-ao .nw-preview *::before,.cs-ao .nw-preview *::after{box-sizing:border-box}

/* ---- Mockup design tokens, rescoped from :root to the canvas ---- */
.cs-ao .nw-canvas{
  /* brand */
  --brand:#009c6f;--brand-hover:#008a5f;--brand-deep:#065f46;--brand-bright:#00b377;--brand-tint:#e8f5f0;--brand-tint-2:#f0fdf9;
  /* text */
  --text-primary:#1a1a2e;--text-secondary:#4b5563;--text-tertiary:#6b7280;--text-muted:#9ca3af;--text-on-brand:#ffffff;
  /* surfaces + borders */
  --surface-base:#ffffff;--surface-panel:#f8f9fa;--surface-panel-2:#f3f4f6;--border:#e5e7eb;--border-strong:#d1d5db;
  /* sidebar */
  --sidebar-bg:#1a1a2e;--sidebar-text-active:rgba(255,255,255,0.9);--sidebar-text:rgba(255,255,255,0.6);--sidebar-text-faint:rgba(255,255,255,0.3);--sidebar-hover:rgba(255,255,255,0.06);--sidebar-border:rgba(255,255,255,0.08);
  /* semantic */
  --success:#10b981;--success-tint:#d1fae5;--success-tint-2:#f0fdf4;--success-deep:#065f46;
  --warning:#f59e0b;--warning-deep:#b45309;--warning-deepest:#92400e;--warning-tint:#fef3c7;
  --error:#ef4444;--error-deep:#dc2626;--error-deepest:#991b1b;--error-tint:#fee2e2;
  --info:#3b82f6;--info-deep:#1d4ed8;--info-tint:#dbeafe;
  --category:#7c3aed;--category-tint:#ede9fe;
  /* type (Inter in the source system, mapped to the self-hosted family) */
  --font-ui:'Hanken Grotesk',system-ui,sans-serif;--font-num:'Hanken Grotesk',system-ui,sans-serif;--num-feat:"tnum" 1;
  --fs-meta:10px;--fs-meta-2:11px;--fs-label:12px;--fs-body-sm:13px;--fs-body:14px;--fs-body-lg:15px;--fs-subhead:16px;--fs-h6:18px;--fs-h5:20px;--fs-h4:22px;--fs-h3:24px;--fs-h2:28px;--fs-h1:32px;
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;
  --lh-tight:1.2;--lh-snug:1.35;--lh-normal:1.5;--ls-label:0.04em;
  /* spacing / radius / elevation / motion */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;
  --gap-sm:8px;--gap-md:12px;--gap-lg:16px;--gap-xl:24px;
  --radius-sm:4px;--radius-md:6px;--radius:8px;--radius-lg:12px;--radius-xl:16px;--radius-pill:999px;--radius-full:50%;
  --shadow-xs:0 1px 2px rgba(0,0,0,0.04);--shadow-sm:0 2px 4px rgba(0,0,0,0.06);--shadow:0 2px 8px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.15);--shadow-lg:0 20px 60px rgba(0,0,0,0.25);--shadow-xl:0 25px 50px rgba(0,0,0,0.30);
  --ease:cubic-bezier(0.4,0,0.2,1);--dur-fast:120ms;--dur:160ms;--dur-slow:240ms;
}

/* numeric runs align */
.cs-ao .nw-canvas .num,.cs-ao .nw-canvas [data-num]{font-family:var(--font-num);font-feature-settings:var(--num-feat);font-variant-numeric:tabular-nums}

/* mockup-specific support rules carried over from the design canvases */
.cs-ao .nw-canvas aside button > span + span{background:var(--brand) !important;color:#fff !important}
@keyframes ao-dot-pulse{0%{transform:scale(1);opacity:.45}70%,100%{transform:scale(2.4);opacity:0}}
@keyframes ao-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes aopulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.cs-ao .nw-canvas *{animation:none !important}}

/* analytics hover tooltips (desktop pointer devices only) */
.cs-ao .nw-canvas .ao-ev .ao-tip{opacity:0;visibility:hidden;transition:opacity .15s}
@media (hover:hover){.cs-ao .nw-canvas .ao-ev:hover .ao-tip{opacity:1;visibility:visible}}