/* ============================================================================
   Native Apps Team: the studio shell (bar + footer) and the Parkinsans faces.

   Loaded by every page on native-dev.com, including Mirror's and NativeScan's,
   which have their own stylesheets with their own resets. So every rule here
   is scoped under .st-bar or .st-foot and sets what it needs explicitly
   instead of trusting the page's base styles. Source of truth:
   native-dev-site/static/assets/studio/studio.css. Mirror carries a copy.
   ========================================================================= */

@font-face{
  font-family:"Parkinsans";
  src:url("fonts/parkinsans-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Parkinsans";
  src:url("fonts/parkinsans-800.woff2") format("woff2");
  font-weight:800; font-style:normal; font-display:swap;
}

.st-bar,.st-foot{
  --st-paper:#FFFFFF;
  --st-wash:#F3F4F8;
  --st-ink:#15161C;
  --st-ink-2:#565A69;      /* 6.6:1 on paper, 6.1:1 on wash */
  --st-line:#E2E4EB;
  --st-focus:#3132EE;
  --st-ramp:linear-gradient(90deg,#3132EE 0%,#6D47EA 22%,#CA73B8 45%,#F19483 68%,#92D2AF 88%,#BDF2DE 100%);
  --st-sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-family:var(--st-sys);
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
@media (prefers-color-scheme:dark){
  .st-bar,.st-foot{
    --st-paper:#0E0F14; --st-wash:#15161D; --st-ink:#ECEEF4; --st-ink-2:#A5A9B8;
    --st-line:#262833; --st-focus:#A9AFFF;
  }
}
.st-bar *,.st-foot *{ box-sizing:border-box }

/* ── The bar: an Apple-style global nav ───────────────────────────────────
   44px, translucent, small type, the mark and the studio name on the left and
   the destinations on the right. It scrolls away; each product's own bar
   underneath is the one that sticks. The 2px ramp on top is the studio's
   only colour. */
.st-bar{
  position:relative; z-index:60;
  background:rgba(251,251,253,.86);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  color:var(--st-ink);
  border-bottom:1px solid var(--st-line);
  padding-top:2px;
}
@media (prefers-color-scheme:dark){ .st-bar{ background:rgba(22,22,23,.86) } }
.st-bar::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:var(--st-ramp);
}
.st-bar__in{
  max-width:1184px; margin:0 auto; height:44px;
  padding:0 max(16px,env(safe-area-inset-left));
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
@media (min-width:48rem){ .st-bar__in{ padding:0 32px } }

.st-bar__brand{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--st-ink); text-decoration:none;
  font:600 14px/1 var(--st-sys); letter-spacing:-.01em; white-space:nowrap;
  min-height:44px;
}
.st-mark{ display:block; flex:none; height:auto }
.st-bar__brand .st-mark{ height:16px; width:auto }

.st-bar__links{
  display:flex; align-items:center; gap:2px;
  list-style:none; margin:0; padding:0;
}
.st-bar__links li{ margin:0; padding:0 }
.st-bar__links a{
  position:relative; display:inline-flex; align-items:center; min-height:44px;
  padding:0 11px; color:var(--st-ink); opacity:.8; text-decoration:none;
  font:400 13px/1 var(--st-sys); letter-spacing:-.01em; white-space:nowrap;
}
.st-bar__links a:hover{ opacity:1 }
.st-bar__links a[aria-current]{ opacity:1; font-weight:600 }
.st-bar__links a[aria-current]::after{
  content:""; position:absolute; left:11px; right:11px; bottom:8px; height:2px;
  border-radius:2px; background:var(--st-ramp);
}
@media (max-width:33.9rem){ .st-bar__more{ display:none } }
@media (max-width:22rem){
  .st-bar__brand{ font-size:13px; gap:6px }
  .st-bar__links a{ padding:0 7px }
}

.st-bar a:focus-visible,.st-foot a:focus-visible{
  outline:2px solid var(--st-focus); outline-offset:2px; border-radius:6px;
}

/* ── The footer: an Apple-style directory ──────────────────────────────── */
.st-foot{
  background:#F5F5F7; color:#1D1D1F;
  border-top:1px solid #E3E3E8;
  font-size:13px; line-height:1.5;
  --st-foot-2:#424245; --st-foot-3:#6E6E73; --st-foot-line:#D2D2D7;
}
@media (prefers-color-scheme:dark){
  .st-foot{ background:#161617; color:#F5F5F7; border-top-color:#2C2C2E;
    --st-foot-2:#D2D2D7; --st-foot-3:#A1A1A6; --st-foot-line:#424245 }
}
.st-foot__in{
  max-width:1184px; margin:0 auto;
  padding:36px 16px 20px;
  display:grid; gap:28px 24px;
  grid-template-columns:1fr 1fr;
}
.st-foot__brand,.st-foot__col:last-child{ grid-column:1 / -1 }
@media (min-width:48rem){
  .st-foot__in{ padding:44px 32px 24px; grid-template-columns:1.5fr 1fr 1fr 1fr }
  .st-foot__brand,.st-foot__col:last-child{ grid-column:auto }
}
.st-foot__home{
  display:inline-flex; align-items:center; gap:9px;
  color:inherit; text-decoration:none; font-weight:600; font-size:14px;
}
.st-foot__home .st-mark{ height:18px; width:auto }
.st-foot__brand p{ margin:8px 0 0; color:var(--st-foot-3); max-width:30ch }
.st-foot h2{
  margin:0 0 6px; font:600 13px/1.3 var(--st-sys); color:inherit;
  letter-spacing:0; text-transform:none;
}
.st-foot ul{ list-style:none; margin:0; padding:0 }
.st-foot li{ margin:0; padding:0 }
.st-foot li a{
  display:inline-block; padding:5px 0; color:var(--st-foot-2); text-decoration:none;
  overflow-wrap:anywhere;
}
.st-foot li a:hover{ text-decoration:underline; text-underline-offset:3px }
.st-foot__legal{
  max-width:1120px; margin:0 16px; padding:16px 0 32px;
  border-top:1px solid var(--st-foot-line);
  color:var(--st-foot-3); font-size:12px; line-height:1.5;
}
@media (min-width:48rem){ .st-foot__legal{ margin:0 32px } }
@media (min-width:74rem){ .st-foot__legal{ margin:0 auto } }
.st-foot__legal p{ margin:0 0 6px; max-width:90ch }
.st-foot__note{ color:inherit }

@media print{ .st-bar,.st-foot{ display:none } }