/* ============================================================
   Kwik design-system pages — self-hosted font + responsive layer
   These pages come from Claude Design as desktop-width specs with
   heavy inline styles, so mobile fixes use attribute selectors +
   !important (inline styles can only be beaten that way).
   ============================================================ */

/* ---------- Kwik (our Poppins build), self-hosted ---------- */
@font-face{font-family:'Kwik';src:url('/assets/kwik-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Kwik';src:url('/assets/kwik-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Kwik';src:url('/assets/kwik-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Kwik';src:url('/assets/kwik-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Kwik';src:url('/assets/kwik-extrabold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

/* ---------- undo the design-canvas host styles ----------
   The Claude Design export ships `html,body{height:100%}` and
   `#dc-root,#dc-root>.sc-host{height:100%}` because it renders inside a fixed
   preview frame. Standalone that pins the document to one viewport while the
   content is ~27,000px tall — the page cannot scroll at all. Release the height. */
html,body{height:auto!important;min-height:100%}
#dc-root,#dc-root > .sc-host{height:auto!important;min-height:100%}

/* ---------- global guards ---------- */
html,body{overflow-x:hidden;max-width:100%}
img,svg,canvas{max-width:100%}
*{-webkit-tap-highlight-color:transparent}

/* Decorative absolutely-positioned rings/glows must not widen the page */
[style*="position: absolute"]{pointer-events:none}
[style*="position: relative"]:has(> [style*="border-radius: 999px"][style*="position: absolute"]){overflow:hidden}

/* ---------- copy-to-clipboard affordance (software page) ---------- */
[data-copy]{cursor:pointer;transition:opacity .15s}
[data-copy]:hover{opacity:.62}
.k-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(14px);
  background:#0B0B0F;color:#fff;font:600 13px/1 'Kwik','Poppins',system-ui,sans-serif;
  padding:12px 18px;border-radius:999px;z-index:9999;opacity:0;pointer-events:none;
  transition:opacity .22s cubic-bezier(.2,.8,.2,1),transform .22s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 16px 40px -8px rgba(11,11,15,.28)}
.k-toast.in{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- scroll reveal (website page) ----------
   The captured CSS defines both [data-reveal]{opacity:0} and [data-reveal="in"]{opacity:1};
   this restates the "in" state with !important so it can never lose on source order. */
[data-reveal="in"]{opacity:1!important;transform:none!important}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}
/* No-JS / shim-failure safety net: never leave content invisible */
.k-nojs [data-reveal]{opacity:1!important;transform:none!important}

/* ============================================================
   TABLET  ≤ 1024px
   ============================================================ */
@media (max-width:1024px){
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr"]{grid-template-columns:1fr 1fr!important}
  [style*="padding: 120px"]{padding-top:80px!important;padding-bottom:80px!important}
}

/* ============================================================
   MOBILE  ≤ 860px  — stack every fixed multi-column grid
   ============================================================ */
@media (max-width:860px){
  /* Primary rule: every layout-level grid tagged at build time collapses to one column. */
  .k-grid-stack{grid-template-columns:1fr!important}

  /* Sticky header: reclaim the nav's width by dropping the breadcrumb note. */
  .k-topbar{padding-left:16px!important;padding-right:16px!important;gap:14px!important}
  .k-topbar > span:last-child{display:none!important}

  /* Belt-and-braces for any inline pattern the tagger didn't reach. */
  [style*="grid-template-columns: 150px"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 120px 1fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1.3fr"],
  [style*="grid-template-columns: 1fr 1.3fr"],
  [style*="grid-template-columns: 220px"],
  [style*="grid-template-columns: 240px"],
  [style*="grid-template-columns: 260px"],
  [style*="grid-template-columns: 280px"],
  [style*="grid-template-columns: 300px"],
  [style*="grid-template-columns: 340px"]{grid-template-columns:1fr!important}

  /* spec rows: label / demo / notes stack with breathing room */
  [style*="grid-template-columns: 150px"]{gap:12px!important}

  /* containers + section rhythm */
  [style*="max-width: 1200px"],[style*="max-width: 1120px"]{padding-left:16px!important;padding-right:16px!important}
  [style*="padding: 0 32px"],[style*="padding: 0 40px"]{padding-left:16px!important;padding-right:16px!important}
  [style*="padding: 120px"]{padding-top:64px!important;padding-bottom:64px!important}
  [style*="padding: 80px"]{padding-top:56px!important;padding-bottom:56px!important}
  [style*="padding: 64px"]{padding-top:48px!important;padding-bottom:48px!important}
  [style*="padding: 48px"]{padding-top:32px!important;padding-bottom:32px!important}
  [style*="padding: 28px"]{padding:20px!important}
  [style*="padding: 24px 28px"]{padding:20px 16px!important}

  /* type scale down */
  [style*="font-size: 64px"],[style*="font-size: 60px"],[style*="font-size: 56px"]{font-size:34px!important;letter-spacing:-.03em!important}
  [style*="font-size: 44px"],[style*="font-size: 40px"]{font-size:27px!important}
  [style*="font-size: 34px"]{font-size:24px!important}
  [style*="font-size: 32px"],[style*="font-size: 30px"]{font-size:22px!important}
  [style*="font-size: 28px"]{font-size:21px!important}
  [style*="font-size: 26px"],[style*="font-size: 24px"]{font-size:19px!important}
  [style*="font-size: 22px"]{font-size:18px!important}

  /* wide demo tables scroll instead of blowing out the page */
  table{display:block;width:100%!important;min-width:0!important;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table thead,table tbody{display:table;width:100%;min-width:640px}
  table tr{display:table-row}

  /* clip decorative ring/glow overflow */
  section,[style*="position: relative"]{max-width:100vw}

  /* marquee stays clipped */
  [style*="width: max-content"]{max-width:none!important}
}

/* ============================================================
   SMALL  ≤ 560px
   ============================================================ */
@media (max-width:560px){
  [style*="repeat(auto-fit, minmax(300px"],
  [style*="repeat(auto-fit, minmax(320px"],
  [style*="repeat(auto-fit, minmax(280px"]{grid-template-columns:1fr!important}
  [style*="font-size: 64px"],[style*="font-size: 60px"],[style*="font-size: 56px"]{font-size:30px!important}
  [style*="gap: 64px"]{gap:28px!important}
  [style*="gap: 56px"]{gap:24px!important}
  [style*="gap: 48px"]{gap:22px!important}
  [style*="gap: 40px"]{gap:20px!important}
  [style*="gap: 32px"]{gap:18px!important}
}

/* ---------- sticky page nav on small screens ----------
   Only ~5 of the 10 tabs fit on a phone, and the page tabs (Software /
   Website) were the first pushed off-screen. Pull them to the front, let the
   brand anchors scroll after them, and fade the right edge so it reads as
   scrollable. */
@media (max-width:860px){
  nav{overflow-x:auto!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  nav::-webkit-scrollbar{display:none}
  nav .k-nav-page{order:-1;flex:0 0 auto}
  nav > span[style*="width: 1px"]{display:none}   /* divider is redundant once tabs lead */
  nav > a,nav > span{flex:0 0 auto}
  .k-topbar{position:relative}
  .k-topbar::after{content:"";position:absolute;right:0;top:0;bottom:0;width:30px;
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95) 75%);
    pointer-events:none;z-index:2}
}