/* The pcdev world, shared by every product site (approved on pcdev.info, 2026-10-06).
   Black and white, hairline rules, Schibsted Grotesk for words, IBM Plex Mono only for
   measured numbers. No colour, no glow, no gradients. This file is the shell: tokens,
   base, the nav bar, buttons, footer, mobile menu and reveal. studio.css is the landing;
   pcd-read.css (guides, legal, references) and pcd-operate.css (dashboards) sit on it.
   The same file ships in astro-panel and pcdev-panel; keep the copies identical.

   Feel (2026-10-08): presses answer on pointer-down in 100ms, anything that opens moves on
   a critically damped curve (--w-spring, no overshoot) and is a CSS transition so it can be
   reversed mid-flight, type sizes are rem so the browser's text size scales them. */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0b0b0c; --bg-2:#0f0f11; --ink:#ededef; --ink-2:#a1a1a8; --ink-3:#8b8b94;
  --rule:rgba(255,255,255,.10); --rule-2:rgba(255,255,255,.055); --rule-3:rgba(255,255,255,.035);
  --sans:'Schibsted Grotesk','Schibsted Grotesk Fallback',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','IBM Plex Mono Fallback',ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(20px,5vw,64px); --max:1240px;
  --w-ease:cubic-bezier(.16,1,.3,1);
  /* Apple's default spring (damping 1, response ~.35s) as a curve: settles, never overshoots */
  --w-spring:cubic-bezier(.2,.9,.25,1); --w-open:340ms; --w-press:100ms;
  --nav-bg:rgba(11,11,12,.86);
}
html{scroll-behavior:smooth;scroll-padding-top:72px;scrollbar-color:#2c2c31 var(--bg);-webkit-text-size-adjust:100%;caret-color:var(--ink);accent-color:var(--ink)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.6;letter-spacing:0;font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
::selection{background:var(--ink);color:var(--bg)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2c2c31;border:3px solid var(--bg);border-radius:10px}
::placeholder{color:var(--ink-3)}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
/* no 300ms tap delay, no double-tap zoom on anything you press */
a,button,input,select,textarea,label,summary,[role=button],[role=switch],[role=tab],[tabindex]{touch-action:manipulation}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
img,video,svg{display:block;max-width:100%}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
.shell{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.skip{position:absolute;left:-9999px;top:8px;z-index:80;background:var(--ink);color:var(--bg);padding:8px 14px;text-decoration:none}
.skip:focus{left:8px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- nav
   A translucent layer the page scrolls under. Its hairline is a scroll edge: it only shows
   once something is under the bar (html.pcd-scrolled, set by the menu script). */
.w-nav{position:sticky;top:0;z-index:30;border-bottom:1px solid transparent;background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(120%) blur(10px);backdrop-filter:saturate(120%) blur(10px);
  transition:border-color .2s var(--w-ease)}
html.pcd-scrolled .w-nav{border-bottom-color:var(--rule)}
.w-nav .nav-in{display:flex;align-items:center;gap:28px;height:58px}
.w-nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;letter-spacing:-.01em;font-size:1rem;color:var(--ink)}
.w-nav .brand svg,.w-nav .brand img{height:22px;width:22px;flex:none}
.w-nav .brand img{border-radius:5px}
.w-nav .nav-links{display:flex;gap:24px;margin-left:auto;align-items:center}
.w-nav .nav-links a{font-size:.875rem;color:var(--ink-2);text-decoration:none;transition:color .2s var(--w-ease),opacity .2s var(--w-ease)}
.w-nav .nav-links a:hover{color:var(--ink)}
.w-nav .nav-links a:active{opacity:.6;transition-duration:var(--w-press)}
/* where you are: the current page, or the section of this page in view */
.w-nav .nav-links a[aria-current]:not(.nav-cta){color:var(--ink);text-decoration:underline;text-underline-offset:.5em}
.w-nav .nav-links .nav-cta{color:var(--bg);background:var(--ink);padding:8px 14px;border-radius:2px;font-weight:500;
  transition:background-color .2s var(--w-ease),transform .3s var(--w-spring)}
.w-nav .nav-links .nav-cta:hover{color:var(--bg);background:#fff}
.w-nav .nav-links .nav-cta:active{opacity:1;transform:scale(.97);transition-duration:var(--w-press);transition-timing-function:ease-out}

/* ---------------------------------------------------------------- buttons */
.w-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:2px;
  font:500 .9375rem/1.2 var(--sans);letter-spacing:0;text-transform:none;text-decoration:none;border:1px solid var(--rule);color:var(--ink);background:transparent;
  box-shadow:none;cursor:pointer;transition:background-color .25s var(--w-ease),border-color .25s var(--w-ease),color .25s var(--w-ease),transform .3s var(--w-spring)}
.w-btn:hover{border-color:rgba(255,255,255,.32);transform:none;box-shadow:none}
.w-btn:active{transform:scale(.97);transition-duration:var(--w-press);transition-timing-function:ease-out}
.w-btn.solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.w-btn.solid:hover{background:#fff;border-color:#fff}
.w-btn .arr{width:14px;height:14px;flex:none;transition:transform .3s var(--w-ease)}
.w-btn:hover .arr{transform:translateX(3px)}
.w-btn.sm{min-height:38px;padding:0 15px;font-size:.875rem}
@media (prefers-reduced-motion:reduce){
  .w-btn .arr{transition:none}
  .w-btn:active,.w-nav .nav-links .nav-cta:active{transform:none;opacity:.8}
}

/* ---------------------------------------------------------------- footer */
.w-foot{padding:36px 0 48px;border-top:1px solid var(--rule)}
.w-foot .foot{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;font-size:.875rem;color:var(--ink-3)}
.w-foot a{color:var(--ink-2);text-decoration:none;transition:color .2s var(--w-ease),opacity .2s var(--w-ease)}
.w-foot a:hover{color:var(--ink)}
.w-foot a:active{opacity:.6;transition-duration:var(--w-press)}
.w-foot a[aria-current]{color:var(--ink)}
.w-foot .spacer{flex:1}

/* ---------------------------------------------------------------- reveal
   Visible by default; only a page whose script ran (html.js) hides then shows. One-shot
   ambient motion, so a keyframe-free transition that never gates a click. */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .9s var(--w-ease),transform .9s var(--w-ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{transform:none;transition:opacity .2s ease}}

/* ---------------------------------------------------------------- mobile menu (pcd-menu-v2 script)
   Below 820px the link row becomes a sheet that unrolls down out of the bar and rolls back up
   into it. Transitions, not keyframes: tap the button again mid-motion and it reverses from
   where it is. Tapping outside closes it. */
.pcd-burger{display:none;width:44px;height:44px;margin-left:auto;padding:0;border:1px solid var(--rule);border-radius:2px;
  background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none;
  transition:transform .3s var(--w-spring),border-color .2s var(--w-ease)}
.pcd-burger:active{transform:scale(.94);transition-duration:var(--w-press);transition-timing-function:ease-out}
.pcd-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform var(--w-open) var(--w-spring),opacity .15s}
html.pcd-menu-open .pcd-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
html.pcd-menu-open .pcd-burger span:nth-child(2){opacity:0}
html.pcd-menu-open .pcd-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:820px){
  .pcd-burger{display:flex}
  .pcd-menu,.w-nav .pcd-menu{position:fixed;left:0;right:0;top:var(--pcd-bar,59px);z-index:60;display:flex!important;flex-direction:column;align-items:stretch;gap:0;
    margin:0;padding:8px var(--gut) 16px;background:var(--bg);border-bottom:1px solid var(--rule);
    transform:translateY(-12px);clip-path:inset(0 0 100% 0);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform var(--w-open) var(--w-spring),clip-path var(--w-open) var(--w-spring),opacity .2s var(--w-ease),visibility 0s linear var(--w-open)}
  html.pcd-menu-open .pcd-menu,html.pcd-menu-open .w-nav .pcd-menu{transform:none;clip-path:inset(0 0 0 0);opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
  .pcd-menu a{display:flex!important;min-height:48px;align-items:center;font-size:1rem!important;padding:0 4px!important;border-bottom:1px solid var(--rule-2);color:var(--ink-2)}
  .pcd-menu a:active{background:rgba(255,255,255,.04)}
  .pcd-menu a[aria-current]:not(.nav-cta){color:var(--ink);text-decoration:none;box-shadow:inset 2px 0 0 var(--ink);padding-left:12px!important}
  .pcd-menu a:last-child{border-bottom:0}
  .pcd-menu .nav-cta{margin-top:10px;justify-content:center;border-bottom:0;color:var(--bg)!important}
  .pcd-menu .nav-cta:active{background:#fff}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  .pcd-menu,.w-nav .pcd-menu{transform:none;clip-path:none;transition:opacity .18s ease,visibility 0s linear .18s}
  .pcd-burger span{transition:opacity .18s}
}

/* ---------------------------------------------------------------- type tracking
   Small text opens up slightly; display sizes tighten in each sheet that sets them. */
.w-foot .foot,.skip{letter-spacing:.01em}

/* ---------------------------------------------------------------- materials and contrast */
@media (prefers-reduced-transparency:reduce){
  .w-nav{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root{--ink-2:var(--ink);--ink-3:#d6d6db;--rule:rgba(255,255,255,.34);--rule-2:rgba(255,255,255,.24);--rule-3:rgba(255,255,255,.16);--nav-bg:var(--bg)}
  .w-nav{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:var(--rule)}
  .w-btn{border-color:rgba(255,255,255,.5)}
  :focus-visible{outline-width:2px}
}